vue class绑定的几种方法,vue动态加class

　　本文主要介绍vue的多类和三元运算或其他条件的动态绑定，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

目录

　　使用三元运算或其他条件动态绑定多个类。动态绑定属性的例子实现了在一个标签中写入多个类(包括三元表达式)。1.数组形式。2.串并置

动态绑定多个class带上三元运算或其他条件

动态绑定属性

　　在v-for循环中，根据要求，在10条数据中，前三条添加了不同的样式。

例子

　　将第一个数据的样式设置为1。

　　li v-for=(item，index) in items :key=index

　　span :class=index==0？one : { { index 1 } }/span

　　/李

　　设置风格和判断

　　li v-for=(item，index) in items :key=index

　　span :class=[index==0？one :， select-active :items . is true] { { index 1 } }/span

　　/李

实现

　　li v-for=(item，index) in items :key=index

　　span :class=[index==0？one :，index==1？两个“:”，index==2？三个: ]{{index 1}}/span

　　/李

一个标签中含有多个class(其中包含三元表达式)的写法

1.数组形式

　　div :class=[classify ，current==0 ？active : ] @ click= current=0 course/div

　　注意：如果你没有在数组中引用classify，它代表数据中的一个项，而不是类名。你可以通过加双引号分类，把它变成一个字符串，把它变成一个类名。

2.字符串拼接

　　 div:class= classify (current== 0 ？active : ) @ click= current=0 course/div

　　注意：激活前必须添加一个空格。当字符串拼接时，两个字符串之间应该有一个空格

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。