vue.js绑定class和style样式6

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

通过 v-bind:class 或者 :class 来为style或者class来绑定

绑定class

rush:xhtml;">

js代码

rush:js;"> var myVue = new Vue({ el: ".test",data: { isActive:true,isCc:false },});

或者下面的代码也可以实现

rush:xhtml;">

js代码

rush:js;"> var myVue = new Vue({ el: ".test",data: { classObject:{ active:true } },});

通过过数组将class绑定

rush:xhtml;">

js代码

rush:js;"> var myVue = new Vue({ el: ".test",data: { activeClass:"active",error:"ddd" },});

绑定style属性

rush:xhtml;">
dsdsd

js代码

rush:js;"> var myVue = new Vue({ el: ".test",data: { styleObject:{ color: "red",fontSize: "30px" } },});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...