2. 程式人生 > 實用技巧 >vue動態繫結class與style總結

vue動態繫結class與style總結

阿新 • • 發佈：2020-09-21

有的東西，看似簡單，實則不簡單，還是要多總結，在真實專案當中予以應用。

在vue當中繫結class和style的方式有很多種，基本都知道，但是在專案當中真正遇到需要用樣式變化呢的場景卻怎麼也想不起來，很模糊，只能寫一些簡單地樣式邏輯，今天來總結一下vue中動態繫結樣式的情況。

demo01:

點選啟用按鈕flag變數取反，切換divclass類名應用isActive類或者不應用isActive類。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .isActive {
    background: red
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js
 
"></script>

<body>
  <div id="app">
    <div :class="{'isActive':flag}">
      我是一個div
    </div>
    <button @click="flag=!flag">啟用</button>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        flag: false
      }
    },

  })
</script>

</html>

demo02:

兩個按鈕分別對isred和isblue變數做取反，盒子本來有個類名circle，動態新增isred和isblue類，class和:class可以共存

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 22:41:24
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 22:49:16
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .isActive {
    background: red
  }

  .bg-red {
    background: red;
  }

  .text-blue {
    color: blue
  }

  .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js
 
"></script>

<body>
  <div id="app">
    <div class="circle" :class="{'bg-red':isred,'text-blue':isblue}">
      我是一個div
    </div>
    <button @click="isred=!isred">啟用</button>
    <button @click="isblue=!isblue">啟用</button>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        isred: false,
        isblue: false
      }
    }
  })
</script>

</html>

demo03:

當:class的表示式過長或邏輯複雜時，還可以繫結一個計算屬性，一般當條件多餘2個時，都可以使用data或者computed，例如使用計算屬性：

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:03:05
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:10:22
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .active {
    color: blue;
    background: red;
  }

  .error-info {
    color: black;
    background: #ccc;
  }

  .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <div class="circle" :class="classes">
      我是一個div {{isred}} {{isblue}}
    </div>
    <button @click="isred=!isred">啟用</button>
    <button @click="isblue=!isblue">啟用</button>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        isred: false,
        isblue: false
      }
    },
    computed: {
      classes() {
        return {
          active: this.isred && this.isblue,
          'error-info': !this.isred && !this.isblue,
        }
      }
    }

  })
</script>

</html>

demo04

盒子擁有多個類名，則用陣列語法標識 注意：帶中劃線的型別需要加引號！

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:03:05
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:21:53
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .red {
    background: red;
  }

  .text-blue {
    color: blue
  }

  .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <div :class="[red,'text-blue',circle]">
      我是一個div
    </div>

  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        red: 'red',
        'text-blue': 'text-blue',
        circle: 'circle'
      }
    },
    computed: {

    }

  })
</script>

</html>

demo05

陣列語法配合三元表示式或者物件語法 注：第一種三元表示式和第二種物件語法效果是一樣的

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:03:05
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:26:56
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .red {
    background: red;
  }

  .text-blue {
    color: blue
  }

  .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <div :class="[isred? red:'','text-blue',circle]">
      我是一個div
    </div>

    <div :class="[{'red':isred},'text-blue',circle]">
      我是一個div
    </div>
    <button @click="isred=!isred"></button>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        red: 'red',
        'text-blue': 'text-blue',
        circle: 'circle',

        isred: false
      }
    },
    computed: {

    }

  })
</script>

</html>

demo06

利用計算屬性動態生成盒子類名，通過下拉框控制btn-large btn-middle btn-small的切換，通過disabled變數控制btn-disabled的新增與移除。

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:33:25
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:42:28
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .btn-disabled {
    background: #aaa;
  }

  .btn-large {
    width: 200px;
    height: 80px;
  }

  .btn-middle {
    width: 120px;
    height: 60px;
  }

  .btn-small {
    width: 80px;
    height: 50px;
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <button :class="dynamicClass">我是動態按鈕</button>
    <select v-model="size">
      <option value="">請選擇</option>
      <option value="large">大</option>
      <option value="middle">中</option>
      <option value="small">小</option>
    </select>
    <button type="button" @click="disabled=!disabled">切換動態按鈕是否禁用</button>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        size: '',
        disabled: true
      }
    },
    computed: {
      dynamicClass() {
        return [
          'btn',
          {
            ['btn-' + this.size]: this.size !== "",
            ['btn-disabled']: this.disabled
          }
        ]
      }
    }

  })
</script>

</html>

demo07

繫結在元件上 注：元件上繫結的class會渲染到元件根元素上！

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:33:25
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:53:27
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .red {
    color: red
  }

  .fontClass {
    font-size: 55px
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <my-component :class="{'red':isred}"></my-component>
    <button @click="isred=!isred">點選切換</button>
  </div>
</body>
<script>
  Vue.component("my-component", {
    template: "<p>我是一段文字</p>"
  })
  var app = new Vue({
    el: "#app",
    data() {
      return {
        isred: false
      }
    },
    computed: {
    }

  })
</script>

</html>

demo08

內聯樣式，也有陣列語法，物件語法，複雜且長可以寫到data或computed中

秒收目錄站https://www.tomove.com.cn

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:33:25
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-28 00:05:16
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入元件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<body>
  <div id="app">
    <div>
      <el-color-picker v-model="color"></el-color-picker>
      <div :style="{'color':color,'fontSize':fontSize+'px'}">內聯style</div>
      <button @click="fontSize++">加大字號</button>
    </div>
  </div>
</body>
<script>

  var app = new Vue({
    el: "#app",
    data() {
      return {
        color: null,
        fontSize: 12
      }
    },
    computed: {
    }

  })
</script>

</html>

相關推薦

vue動態繫結class與style總結

有的東西，看似簡單，實則不簡單，還是要多總結，在真實專案當中予以應用。

vue動態繫結:class的幾種方式

一、物件語法 1、給v-bind:class 設定一個物件，可以動態地切換class，例如： <div id=\"app\">

vue動態繫結class的幾種方式

vue動態繫結class的最常用幾種方式：該文章轉載於 https://www.cnblogs.com/lwming/p/10925318.html

vue動態繫結class的最常用幾種方式：

第一種：（最簡單的繫結） 1.繫結單個class html部分： <div :class=\"{\'active\':isActive}\"></div>

vue動態繫結class

vue提供動態繫結class的方法，根據屬性控制控制class的顯示與隱藏。 testStyle,testStyle2是類名，是否在元素中引用該類，取決於後面的方法（屬性）傳遞回來的值（true 或 false）

Vue v-bind動態繫結class例項方法

現在很多網站，都是希望動態切換class，更換css樣式。下面我們使用Vue的v-bind繫結class

vue動態繫結屬性--基本用法及動態繫結class

動態繫結屬性v-bind:，語法糖形式:省略v-bind，僅寫一個冒號。 一、動態繫結基本屬性

vue動態繫結屬性--動態繫結style

動態繫結style 　　使用v-bind:style繫結css內聯樣式，寫屬性名時，使用駝峰式或短橫分隔（單引號括起來），如屬性font-size,駝峰式寫法fontSize，短橫寫法：\'font-size\'

Vue動態繫結v-model

　　現在很多輸入框是通過前端寫死固定欄位，如果這些欄位是後端生成的呢？通過後端返回欄位，形如

Vue動態繫結img的src屬性

技術標籤：vue img圖片路徑：根據不同的狀態顯示不同地址 用於圖片地址不是絕對路徑

vue動態繫結圖示的完整步驟

0 圖示和圖片的不同 圖示時字元，圖片時二進位制流。即圖片載入會比圖示慢，且載入圖示最好不要用img標籤，我們可以把圖示當成元件用import的方法引入進來，然後當成標籤引入。

vue3 增強繫結Class和Style

由於Class和Style繫結使用頻繁，字串拼接麻煩且易錯。因此，Vue.js 做了專門的增強。表示式結果的型別除了字串之外，還可以是物件或陣列

Vue 動態繫結CSS樣式

今天在做專案上遇見了一個需求，通過不能的進度型別展示不同的進度形態，進度形態通過背景色和背景色上的文字顯示。

動態繫結class

寫在指令中的值會被視作表示式，如javascript表示式，因此v-bind:class接受三目運算：

vue動態繫結v-model輸入框無法輸入

因為欄位不確定，使用了動態繫結v-model，新增的時候可以輸入，等修改的時候就無法輸入了

五、動態繫結屬性（style）

一、v-bind動態繫結style(物件語法) <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\">

vue動態繫結類名

<view :class=\"[index == 0 ? \'bgpvip\' : \'bgsvip\' ,bg]\">   1.class前面需要加: 2.多個類名可以使用陣列的方式

vue計算屬性+vue中class與style繫結(推薦)

vue計算屬性 在模板中放入大量的邏輯會讓模板過重且難以維護 計算屬性下所有函式可以放到computed中

Vue class與style繫結

Vue class與style繫結 剛開始學習vue,下面是一些小結 關於class與style繫結的官網地址：https://cn.vuejs.org/v2/guide/class-and-style.html

Vue中Class與Style幾種繫結用法

操作元素的 class 列表和內聯樣式是資料繫結的一個常見需求。因為它們都是 attribute，所以我們可以用v-bind處理它們；