vue动态绑定多个class以及带上三元运算或其他条件
更新时间：2022年04月06日 14:56:53 作者：泥子君
这篇文章主要介绍了vue动态绑定多个class以及带上三元运算或其他条件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
动态绑定多个class带上三元运算或其他条件
动态绑定属性
在v-for循环中，根据需求，在10条数据里，前3条添加不一样的样式。
例子
设置第一条数据的样式为one
<li v-for="(item,index) in items" :key="index">
<span :class="index==0?'one':''">{{index+1}}</span>
</li>设置样式并判断
<li v-for="(item,index) in items" :key="index">
<span :class="[index==0?'one':'','select-active':items.istrue]">{{index+1}}</span>
</li>实现
<li v-for="(item,index) in items" :key="index">
<span :class="[index==0?'one':'',index==1?'two':'',index==2?'three':'']">{{index+1}}</span>
</li>一个标签中含有多个class(其中包含三元表达式)的写法
1.数组形式
<div :class='["classify",current=="0" ? "active" : ""]' @click='current=0'>课程</div>
注意：数组中的classify如果不加引号的话，代表的是data中的一项，并不是类名，将classify加上双引号，变成字符串就可以变成类名
2.字符串拼接
<div :class="'classify'+(current=='0'?' active':'')" @click='current=0'>课程</div>
注意：active前要加一个空格（必须有），字符串拼接时，两个字符串之间要有空格
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue如何动态修改meta的title，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
其实采用vueUse中的useVirtualList方法同样可以实现虚拟列表,这篇文章小编就来和大家详细介绍一下如何使用vueUse实现简单的虚拟列表效果吧2024-04-04
这篇文章主要介绍了vue input实现点击按钮文字增删功能,涉及基于vue.js的事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了一份超级详细的Vue-cli3.0使用教程，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
鼠标移入时的小手、鼠标点击时按钮下压弹起的动画、触屏应用点击时的屏幕震动，这些效果也被统称为点击反馈，虽然看似是应用中的细枝末节，但是只要稍微投入一点点心思，带来的用户体验提升是十分明显的,这里作者为小伙伴们推荐一种作者最喜欢的点击反馈效果。2021-05-05
vue3 使用defineAsyncComponent与component标签实现动态渲染组件思路详解
这篇文章主要介绍了vue3 使用defineAsyncComponent与component标签实现动态渲染组件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue 组件使用中的一些细节点，大概有两大细节点，本文通过基础实例给大家介绍的非常详细，需要的朋友参考下吧2018-04-04
这篇文章主要为大家详细介绍了Vue.Draggable拖拽功能配置使用的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
vue中提示$index is not defined错误的解决方式
这篇文章主要介绍了vue中提示$index is not defined错误的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
Vue3中watch监听对象的属性值(监听源必须是一个getter函数)
这篇文章主要介绍了Vue3中watch监听对象的属性值，监听源必须是一个getter函数,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
最新评论