VUE学习-:class & :style

:class & :style

:class

1. 键值对

   <div id="app" v-bind:class="{ 'active': isActive }"></div>
   <script>
   new Vue({
   	el:'#app',
   	data:{isActive:true}
   })
   </script>
   

2. 对象

   <div id="app" v-bind:class="classObj"></div>
   <script>
   new Vue({
   	el:'#app',
   	data:{
   		classObj:{active:true}
   	}
   })
   </script>
   

3. 计算属性

   <div id="app" v-bind:class="classObj"></div>
   <script>
   new Vue({
   	el:'#app',
   	computed:{
   		classObject(){
   			return {active:true}
   		}
   	}
   })
   </script>
   

4. 数组

   <div id="app" v-bind:class="[activeClass, errClass]"></div>
   <script>
   new Vue({
   	el:'#app',
   	data:{
   		activeClass:'active',
   		errClass: 'text-danger'
   	}
   })
   </script>
   

5. 数组+对象

   <div id="app" v-bind:class="[{'active':isActive}, errClass]"></div>
   <script>
   new Vue({
   	el:'#app',
   	data:{
   		isActive:true,
   		errClass: 'text-danger'
   	}
   })
   </script>
   

:style

特点：

1. 自动添加前缀。当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
2. 多重值。为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值。这样写只会渲染数组中最后一个被浏览器支持的值。

值

1. 对象

   <div id="app" v-bind:style="{ color: activeColor }"></div>
   <script>
   new Vue({
   	el:'#app',
   	data:{activeColor:red}
   })
   </script>
   

2. 数组

   <div id="app" v-bind:style="[base,read]"></div>
   <script>
   new Vue({
   	el:'#app',
   	data:{
   		base:{color:blue},
   		read:{color:purple}
   	}
   })
   </script>