vue基础---Class 与 Style 绑定
【一】绑定HTML Class
(1)对象语法
①普通绑定class
<div id="area" v-bind:class="className"></div> <script type="text/javascript"> var vm = new Vue({ el:"#area", data:{ className:"show_area" } }) </script>
此时会发现class类名为show_area
②内联绑定数据对象
我们可以传给 v-bind:class
一个对象,以动态地切换 class:
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 active
这个 class 存在与否将取决于数据属性 isActive
的 truthiness。
你可以在对象中传入更多属性来动态切换多个 class。此外,v-bind:class
指令也可以与普通的 class 属性共存。当有如下模板:
<div id="areaId" class="show_area" v-bind:class="{area:area_status,active:active_status,back:back_status}"></div> <script type="text/javascript"> var vm = new Vue({ el:"#areaId", data:{ area_status:true, active_status:true, back_status:false } }) </script>
结果:
当 area_status或者 active_status、back_status变化时,class 列表将相应地更新。例如,如果 back_status的值为 true
,class 列表将变为 "show_area area active back"
。
③外部绑定
绑定的数据对象不必内联定义在模板里
<div id="areaId" class="show_area" v-bind:class="classObj"></div> <script type="text/javascript"> var vm = new Vue({ el:"#areaId", data:{ classObj:{ area_status:true, active_status:true, back_status:false } } }) </script>
渲染的结果和上面一样。
(2)数组语法
v-bind除了接收对象,也可以把一个数组传给 v-bind:class
,以应用一个 class 列表:
<div id="areaId" class="show_area" v-bind:class="[active_class,show_class,area_class]"></div> <script type="text/javascript"> var vm = new Vue({ el:"#areaId", data:{ active_class:'active', show_class:'show', area_class:'area' } }) </script>
(3)用在组件上(待定/验证)
当在一个自定义组件上使用 class
属性时,这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。例如,如果你声明了这个组件:
Vue.component('my-component', { template: '<p class="foo bar">Hi</p>' })
然后在使用它的时候添加一些 class:
<my-component class="baz boo"></my-component>
HTML 将被渲染为:
<p class="foo bar baz boo">Hi</p>
对于带数据绑定 class 也同样适用:
<my-component v-bind:class="{ active: isActive }"></my-component>
当 isActive
为 truthy 时,HTML 将被渲染成为:
<p class="foo bar active">Hi</p>
【二】绑定内联样式
(1)对象语法
①内联列表绑定
v-bind:style
的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) 来命名:
<!-- 绑定内联样式 --> <div class="inner" v-bind:style="{color:colorValue,fontSize:size+'px',backgroundColor:bgColor}"> 绑定内联样式 </div> var inner = new Vue({ el:".inner", data:{ colorValue:"white", size:18, bgColor:"red" } });
②内联对象绑定(注意:styleObject两边不加{})
<!-- 绑定内联样式 --> <div class="inner" v-bind:style="styleObject"> 绑定内联样式 </div> var inner = new Vue({ el:".inner", data:{ styleObject:{ fontSize:'12px', backgroundColor:'red', color:'white' } } });
(2)数组语法
内联数组+对象结合绑定,v-bind:style
的数组语法可以将多个样式对象应用到同一个元素上:
<div class="inner3" v-bind:style="[fontObj,backObj]"> 绑定内联样式-内联数组绑定(注意:数组时两边是[]) </div> var inner3 = new Vue({ el:".inner3", data:{ /* 字体-样式对象 */ fontObj:{ color:'green', fontSize:'30px' }, /* 背景-样式对象 */ backObj:{ backgroundColor:'orange' } } })
(3)自动添加前缀(测试后无效,有待验证)
.