vue多个元素的样式选择器问题
更新时间：2019年11月29日 14:02:31 作者：no_have_name_
这篇文章主要介绍了vue多个元素的样式选择器问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
三目运算符只能进行两个的选择判断，多个选择就很难受了。
废话少说，直接上源码。
首先获取它的索引，通过索引来判断样式
// 索引key判断
<div class="carborder" v-for="(value, key) in mycarinfo" :key="key">
<router-link
:class="rcar[key]"
to="/payment"
>
我是什么颜色
</router-link>
</div>
在data里面定义元素的样式 数组格式
// 数组格式
data() {
return {
rcar:[
"rcar",
"rcar2",
"rcar3",
"rcar4",
"rcar5",
]
};
下面就是css写自己的样式了
// 自己的样式
.rcar {
background-color: #1388ef;
}
.rcar2 {
background-color: #a0a0a0;
}
.rcar3 {
background-color: #282828;
}
.rcar4 {
background-color: #efc313;
}
.rcar5 {
background-color: #b9bab9;
}
总结
以上所述是小编给大家介绍的vue多个元素的样式选择器问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要为大家介绍了React DOM diff 对比Vue DOM diff 区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
html-webpack-plugin修改页面的title的方法
这篇文章主要介绍了html-webpack-plugin修改页面的title的方法 ，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
SVG指可伸缩矢量图形,用来定义用于网络的基于矢量的图形,下面这篇文章主要给大家介绍了关于如何在vue3+vite项目中使用svg的相关资料,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了vue-列表下详情的展开与折叠案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue 使用class创建和清除水印的示例代码，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了vue中跨域以及sessionId不一致问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
本文主要介绍了element tab标签管理路由页面的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要为大家介绍了vue限制输入数字或者保留两位小数实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了如何理解Vue前后端数据交互与显示，对Vue感兴趣的同学，可以参考下2021-05-05
使用Vue.observable()进行状态管理的实例代码详解
这篇文章主要介绍了使用Vue.observable()进行状态管理的实例代码，本文通过代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
最新评论