本篇博客主要学习内容🌼

先来看看以下这些语句都熟不熟悉吧！这些节选于后续的博客内容🌻🌻🌻

<div :class = "{'active': isActive}">active生效</div><div class="static" :class = "{'active': isActive, 'error': isError}">active生效</div><div :class = "classes()">active生效</div><div :class="[activeClass, errorClass]"></div><div :class="[isActive ? activeClass:'', errorClass]"><div :class="[{'active':isActive}, errorClass]"></div><button :class="classes"></button><button :class="classes" ></button>
<div :style="{'color': color, 'fontSize': fontSize+'px'}">我是内联绑定的元素噢</div><div :style="styles">我是data里绑定的style</div>

对象语法🌺

最常见的就是给v-bind:class设置一个对象，可以动态切换class：

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

这个比较简单：

上面的active依赖于isActive，只有当它为true时才有用，才能显示，我们也可以传入多个属性，来动态切换class
:class可以和class共存

<div id="app"><div class="static" :class = "{'active': isActive, 'error': isError}">active生效</div></div><script>var app = new Vue({el: '#app',data: {isActive:true,isError:false}})</script>

将isError改为true：

当判断条件多于两个时，我们常用计算属性来解决

<div id="app"><div :class = "classes">active生效</div>
</div><script>var app = new Vue({el: '#app',data:{isActive:true,isError:null},computed:{classes: function(){return{active: this.isActive && !this.isError,'text-fail': this.error && this.error.type == 'fail'}}}})
</script>

当isError:null时：

为true时：

为false：

除了计算属性，还可以绑定一个对象或者使用methods
使用methods和计算属性其实差不多：

<div id="app"><div :class = "classes()">active生效</div>
</div><script>var app = new Vue({el: '#app',data:{isActive:true,isError:true},methods: {classes : function (){return {active: this.isActive && !this.isError,'text-fail': this.error && this.error.type == 'fail'}}},})
</script>

数组语法🍍

和上面一样，当要应用多个class属性的时候，可以使用数组语法，给:class绑定一个数组，应用class列表

<div id="app"><div :class="[activeClass, errorClass]"></div>
</div><script>var app = new Vue({el:'#app',data() {return {activeClass: 'active',errorClass: 'error'}},})
</script>

🧐🧐🧐
来玩玩三元运算

<div id="app"><div :class="[isActive ? activeClass:'', errorClass]"></div>
</div><script>var app = new Vue({el:'#app',data() {return {isActive:true,activeClass: 'active',errorClass: 'error'}},})
</script>

样式error是始终都会被应用，当数据isActive为真时，样式active才会被应用：

为false：

甚至，我们可以混用：

<div id="app"><div :class="[{'active':isActive}, errorClass]"></div>
</div>
<script>var app = new Vue({el:'#app',data() {return {isActive:true,errorClass: 'error'}},})
</script>

同样的，我们使用data、computed、methods这些都可以玩
下面来玩computed：

<div id="app"><button :class="classes"></button>
</div>
<script>var app = new Vue({el:'#app',data:{size:'large',disabled:true},computed: {classes:function(){return ['btn',{['btn-'+ this.size]: this.size !== '',['btn-disabled']: this.disabled            }]}},})
</script>

绑定内联样式🍉

绑定内联样式style也是差不多的，举个小例子：
在上面的例子中加入一个文本

<div id="app"><button :class="classes" ></button><div :style="{'color': color, 'fontSize': fontSize+'px'}">我是内联绑定的元素噢</div>
</div>
<script>var app = new Vue({el:'#app',data:{size: 'large',disabled: true,color: 'red',fontSize: 18},computed: {classes:function(){return ['btn',{['btn-'+ this.size]: this.size !== '',['btn-disabled']: this.disabled            }]}},})
</script>

注意：CSS属性要用驼峰命名法或者短横分隔符，渲染后的结果就在上面啦，一般来说吧，我们会直接写在data或者computed里，再来一个小例子：

<div id="app"><div :style="styles">我是data里绑定的style</div>
</div>
<script>var app = new Vue({el: '#app',data: {styles: {color: 'red',fontSize: 18 + 'px'}}})
</script>