Vue.js-Class与Style绑定 原

1、class对象语法 （1）我们可以传给v-bind:class 一个对象，以动态的切换class        <div v-bind:class="{active:isActive}"></div>         上面的语法表示class active显示与否取决于数据属性isActive是否为真值         你可以在对象中传入更多属性用来动态切换多个class,v-bind:class指令也可以与普通的class属         性共存，如下模板         <div class="static" v-bind:class="{active:isActive,'text-danger':hasError}"></div>         data:{                 isActive:true,                 hasError:false          }          渲染为<div class="static active"></div>         // class属性设置为对象的情况，含有-的class名必须要用引号括起来，如"text-danger",单独         的单词可以不用引号，也可以用，绑定的class对象可以与原始的class共存 （2）直接绑定数据里的一个对象         <div v-bind:class="classObject"></div>         data: {              classObject: {              active: true,             'text-danger': false              }        } （3）我们也可以在这里绑定返回对象的计算属性，这是一个常用且强大的模式         <div v-bind:class="classObject"></div>         data: {            isActive: true,            error: null         },          computed: {                classObject: function () {                      return {                                active: this.isActive && !this.error,                                'text-danger': this.error && this.error.type === 'fatal',                                }                  }           }

2、class数组语法  我们可以把一个数组传给v-bind:class,以应用一个class列表 <div v-bind:class="[activeClass,errorClass]"> data:{ activeClass:"active", errorClaaa:"text-danger" } 渲染为<div class="active text-danger"></div> 如果你也想根据条件切换列表中的class,可以用三元表达式 <div v-bind:class="[isActive ? activeClass : '',errorClass]"> 此例始终添加errorClass,但是只有在isActive 是 true 时添加 activeClass 当多个条件时这样写有些繁琐，可以在数组语法中使用对象语法 <div v-bind:class="[{active:isActive},errorClass]">

3、 class用在组件上 例如，如果你声明了这个组件 Vue.component('my-component', {   template: '<p class="foo bar">Hi</p>' }) 然后再使用它的时候添加一些class <my-compent class="baz boo"></my-component> 最终将被渲染为： <p class="foo bar baz boo">Hi</p> 同样的适用于绑定 HTML class: <my-component v-bind:class="{ active: isActive }"></my-component> 当 isActive 为 true 的时候，HTML 将被渲染成为： <p class="foo bar active">Hi</p>

 绑定内联样式 #对象语法 v-bind:style对象语法非常直观--看着非常像css,其实它是一个javascript对象 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data: {   activeColor: 'red',   fontSize: 30 } 直接绑定到一个样式对象通常更好，让模板更清晰 <div v-bind:style="styleObject"></div> data: {   styleObject: {     color: 'red',     fontSize: '13px'   } } 同样的，对象语法常常结合返回对象的计算属性使用 v-bind:style的数组语法可以将多个样式对象应用的一个元素上 <div v-bind:style="[baseStyles,overridingStyles]"

(adsbygoogle = window.adsbygoogle || []).push({});