本文主要介绍如何使用Vue来绑定操作元素的class列表和内联样式(style属性).
因为class和style都是属性,所以通过v-bind命令来处理它们:只需要通过表达式计算出结果即可,不过字符串拼接麻烦且易错。因此,再将v-bind用于class和style属性时,Vue.js做了专门的增强,表达式结果类型除了字符串以外还可以是对象或者数组.
1、对象语法
(1)、绑定的数据对象内联在模版中
我们可以通过给html标签追加v-bind:class的指令,以动态的切换class,html代码如下:
<body> <div id="pageIndex"> <div class="static" v-bind:class="{active:isActive,'text-danger':hasError}">aaa</div> </div> </body>
上面代码中的active和text-danger这两个类选择器是否存在取决于数据属性中的isActive和hasError是否为true,为true的话,类选择器就不存在,js代码如下:
var currentPage=new Vue({ el:"#pageIndex", data:{ isActive:true, hasError:true } });
如上代码所示,v-bind:class指令可以和普通class共存,当isActive和hasError发生变化时,class列表也会进行相应的更新,
(2)、绑定的数据对象不内联在模版中
<body> <div id="pageIndex"> <div class="static" v-bind:class="classObject">aaa</div> </div> </body> <script type="text/javascript"> var currentPage=new Vue({ el:"#pageIndex", data:{ classObject:{ "active":true, "text-danger":true } } }); </script>
结果和(1)中的一模一样.
(3)、绑定的数据对象不内联在模版中,且该数据对象可以通过计算属性得出
<body> <div id="pageIndex"> <div class="static" v-bind:class="classObject">aaa</div> </div> </body> <script type="text/javascript"> var currentPage=new Vue({ el:"#pageIndex", data:{ isActive:true, error:null }, computed:{ classObject:function(){ return { active:this.isActive && !this.error, 'text-danger':this.error && this.error.type === 'fatal' } } } }); </script>
(4)、绑定内联样式
Vue通过v-bind:style指令给dom元素绑定样式,v-bind:style看着非常像css,但它其实是一个Javascript对象.CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
<body> <div id="pageIndex"> <div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">aaa</div> </div> </body> <script type="text/javascript"> var currentPage=new Vue({ el:"#pageIndex", data:{ activeColor: 'blue', fontSize: 30 } }); </script>
上述语法虽然正确,但是直接绑定一个样式对象会更好,这会让模版更清晰:
<body> <div id="pageIndex"> <div v-bind:style="styleObject">aaa</div> </div> </body> <script type="text/javascript"> var currentPage=new Vue({ el:"#pageIndex", data:{ styleObject:{ color: 'red', fontSize: '13px' } } }); </script>
同样的对象语法常常结合计算属性使用.
2、数组语法
(1)、普通用法
Vue提供了一种机制,可以把一个数组传递给v-bind:class,以应用一个class列表:
<body> <div id="pageIndex"> <div v-bind:class="[activeClass, errorClass]">aaa</div> </div> </body> <script type="text/javascript"> var currentPage=new Vue({ el:"#pageIndex", data:{ activeClass:"active", errorClass:"text-danger" } }); </script>
(2)、数组语法中使用三元表达式切换列表中的class
如果你想根据条件切换列表中的class,可以使用三元表达式,Vue支持在数组语法中使用三元表达式.
<body> <div id="pageIndex"> <div v-bind:class="[isActive?activeClass:'',errorClass]">aaa</div> </div> </body> <script type="text/javascript"> var currentPage=new Vue({ el:"#pageIndex", data:{ isActive:false, activeClass:"active", errorClass:"text-danger" } }); </script>
(3)、数组语法中嵌套对象语法
当有多个条件class时上面的在数组语法中使用三元表达式难免有点繁琐,所以这个时候可以在数组语法中嵌套对象语法,使代码尽可能的简洁,代码如下:
<body> <div id="pageIndex"> <div v-bind:class="[{activeClass:isActive},errorClass]">aaa</div> </div> </body> <script type="text/javascript"> var currentPage=new Vue({ el:"#pageIndex", data:{ isActive:true, activeClass:"active", errorClass:"text-danger" } }); </script>
(4)、绑定内联样式
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上,代码如下:
<body> <div id="pageIndex"> <div v-bind:style="[baseStyles, overridingStyles]">aaa</div> </div> </body> <script type="text/javascript"> var currentPage=new Vue({ el:"#pageIndex", data:{ baseStyles:{ color:"blue" }, overridingStyles:{ background:"yellow" } } }); </script>
注:当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
3、多充值
从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。