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

目录

• 动态绑定多个class带上三元运算或其他条件
• 动态绑定属性
• 例子
• 实现
• 一个标签中含有多个class(其中包含三元表达式)的写法
• 1.数组形式
• 2.字符串拼接

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

动态绑定属性

在v-for循环中，根据需求，在10条数据里，前3条添加不一样的样式。

例子

设置第一条数据的样式为one

    {{index+1}}

设置样式并判断

    {{index+1}}

实现

    {{index+1}}

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

1.数组形式

课程

注意：数组中的classify如果不加引号的话，代表的是data中的一项，并不是类名，将classify加上双引号，变成字符串就可以变成类名

2.字符串拼接

课程

注意：active前要加一个空格（必须有），字符串拼接时，两个字符串之间要有空格

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。