vue改变class内的属性_Vue.js如何绑定class和style（内联样式）

vue的class和style绑定

绑定html class

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

上面的语法表示 class active 的更新将取决于数据属性 isActive 是否为真值 。

我们也可以在对象中传入更多的属性来自由的切换class的值，不仅如此，v-bind还可以与普通的class共存。

我们还可以绑定返回对象的计算属性。

data: {

isActive: true,

error: null

},

computed: {

classObject: function () {

return {

active: this.isActive && !this.error,

'text-danger': this.error && this.error.type === 'fatal',

}

}

}

数组语法

我们还可以把一个数组传给v-bind:class

data:{

active:"a",

error:"b"

}

我们也可以在数组上使用三元运算符

data:{

active:"a",

error:"b",

isActive:true

}

当我们更改isActive为false时

此例始终添加 error ，但是只有在 isActive 是 true 时添加 active。

用在组件上

Vue.component("mycom",{

template:"

hi

"

})

输出HTML

hi

这同样适用于绑定HTML class

data:{

isActive:true

}

输出HTML

hi

绑定内联样式(v-bind:style)

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式 (camelCase) 或 (配合引号的) 短横分隔命名 (kebab-case)：

data: {

activeColor: 'red',

fontSize: 30

}

这样我们感觉模板略显繁琐，所以我们可以直接绑定一个样式对象，这样模板会更加清晰

data:{

styleobj:{

color: 'red',

fontSize: '13px'

}

}

同样的，对象语法常常结合返回对象的计算属性使用。

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：

我像风一样自由

data:{

baseStyles:{color:'red'},

overridingStyles:{'font-size':'10px'}

}

自动添加前缀

因为各大浏览器的私有属性不同，我们有时需要在样式前添加前缀

例如-webkit-(谷歌)-ms-(微软)-moz-(火狐)-o-(opera)

但是我们在vue中就无需添加，因为vue会为我们自动添加前缀

多重值

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

这会渲染数组中最后一个被浏览器支持的值。在这个例子中，如果浏览器支持不带浏览器前缀的 flexbox，那么渲染结果会是 display: flex。