vue中class和style的绑定
vue.js的官网写的很好哈，我就是为了详细认真的学习一遍，所以才总结的，比较推荐看官网：vue.js
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组
一、class的绑定
语法1：v-bind:class=”{类名:表达式}“
表达式计算结果为true时，添加这个class，表达式计算结果为false时，不添加这个class
v-bind:class指令也可以与普通的class属性共存
还可以在对象中添加多个属性，动态添加多个class
<li class="todo"v-bind:class="{completed:item.isComplete,editing:item===edtorTodos}"></li>
语法2：数组语法：
我们可以把一个数组传给v-bind:class,以应用一个class列表：
<div v-bind:class="[activeClass, bgClass]"></div>data: {activeClass: 'active',bgClass: 'bg'}
数组中的元素也可以是三元表达式
二、绑定内联样式
语法1：对象语法：v-bind:style=”{css属性名:表达式}“
注意：css属性名可以用驼峰式或短横线分割（如果是用短横线分割的方式是，记得要用单引号括起来）
<p v-bind:style="{fontSize:fontSize+'px'}">你的名字是{{list.name}}</p><p v-bind:style="{'font-size':fontSize+'px'}">你的名字是{{list.name}}</p>
语法2：直接绑定一个对象：v-bind:style=”样式对象”
<div id="wrap"><p v-bind:style="font">你的名字是{{list.name}}</p></div><script>var list = {name:"donna",age:20}var vm = new Vue({el:"#wrap",data:{list,font:{fontSize:'40px'}}});</script>
对象语法常常结合对象的计算属性使用
语法3：数组语法：v-bind:style=”[样式对象,…]“
<p v-bind:style="[fontObj,colorObj]">你的名字是{{list.name}}</p>
自动添加前缀：
当v-bing:style使用需要添加浏览器引擎前缀的css属性时，例如transform，Vue.js会自动侦测并添加响应的前缀
从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
左手的ㄟ右手
深藏阁楼爱情的钟
Bertha 。
落日映苍穹つ
还没有评论，来说两句吧...