vue改变class内的属性_vue 绑定 添加class 属性 4种方法 添加style 3中方法 v-bind /：...

一、添加class

.red{color: skyblue;}

.thin{font-weight: 200;}

.italic{font-style: italic;}

.active{letter-spacing: 0.5em}

1.第一种使用方式，直接传递一个数组，注意的 class需要使用 v-bind 做数据绑定

eg:

H1标签！！！

2.在数组中使用三元表达式

eg:

H1标签！！！

3.在数组中使用 对象来代替三元表达式，提高代码的可读性

H1标签！！！

4.在为class使用v-bind 绑定 对象的时候，对象的属性是类名，由于对象的额属性可带引号，也可以不带引号；属性的值是一个标识符

(1).

H1标签！！！

(2).

H1标签！！！

var vm = new Vue({

el:'#app',

data:{

msg:'点击事件',

flag:false,

classObj:{red:true,thin:true,italic:true,active:true}

},

methods:{

}

});

二、添加style

1.直接在元素上通过:style的形式，书写样式对象

h1标签

2.将样式对象定义到data中，并直接引用到：style

h1标签

3.在：style中通过数组，引用多个data上的样式对象

h1标签

//创建Vue实例

var vm = new Vue({

el:'#app',

data:{

styleobj:{color:'red','font-weight':200},

styleobj2:{'font-style':'italic'}

},

methods:{}

})