四.vue基础-class和style绑定

四.vue基础-class和style绑定

一.class与style绑定

1. class列表和style内联样式都是属性, 所以我们可以用v-bind处理:通过表达式计算出字符串结果(拼接字符串).
2. 表达式结果的类型除了字符串之外, 还可以是对象或数组.

二.绑定HTML Class

1. 直接将vue中data定义变量通过v-bind绑定给标签class属性

   css属性名可以用驼峰式或短横线分隔(记得用单引号括起来)来命名

   <h3 :class = 'aa bb'>
       {{msg}}
   </h3>
   

2. 对象语法:

   通过对象格式完成标签class属性的绑定, 该方式直接将对象的属性即key值直接绑定给对应的class属性, 但是该key是否绑定取决于key对应的value返回值为true或false, 如果为true则直接绑定, 否则不绑定

   例1:

   <div id="app">
           <h3 :class="{activate:state, select:!state}">你好</h3>
   </div>
   

     let vm = new Vue({
           el: '#app',
           data: {
               msg: 'hello world',
               state: true,
           }
       })
   

   渲染为:

   <div id="app">
           <h3 class="active">你好</h3>
   </div>
   

   例2:v-bind:class指令和普通的class属性共存

   <div class="static"
        v-bind:class="{ active: isActive, 'text-danger': hasError }">
   </div>
   

   data: {
     isActive: true,
     hasError: false
   }
   

   渲染为:

   <div class="static active"></div>
   

   例3:绑定的数据对象不必内联定义在模板里:

   <div :class:"className">
   </div>
   

   data:{
       className:{
           active: true,
           'text-danger': false
       }
   }
   

   渲染结果:

   <div class="active"></div>
   

3. 数组语法:

   通过数组的结构进行绑定, 此时可以实现多个class属性同时绑定.

   例1:

   <h3 :class="['activate', 'select']">你好</h3>
   

   渲染为:

   <h3 class = "activate select"></h3>
   

   例2:

   <div :class = "[activateClass, selectClass]"></div>
   

   data: {
       activeteClass:'activete',
       selectClass:'select'
   }
   

   渲染为:

   <div class = "activate select"></div>
   

三.绑定内联样式

1. 对象语法

   v-bind:style的对象语法十分直观(看起来非常像CSS), 但其实是一个JavaScript对象.css属性名可以用驼峰式或短横线分隔(记得用单引号括起来)来命名.

   例1:

   <div :style="{color: activeColor, fontSize: fontSize + 'px'}"></div>
   

   data: {
       activeColor: 'red',
       fontSize: 30
   }
   
   

   例2: 直接绑定到一个样式对象通常更好, 这会让模板更清晰:

   <div :style='styleObject'></div>
   
   

   data: {
       styleObject: {
           color: 'red',
           fontSize: '13px'
       }
   }
   
   

2. 数组语法

   <div :style="[baseStyles, overridingStyles]"></div>
   
   

参考文章