vue多个元素的样式选择器问题


Posted in Javascript onNovember 29, 2019

三目运算符只能进行两个的选择判断,多个选择就很难受了。

废话少说,直接上源码。

首先获取它的索引,通过索引来判断样式

// 索引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多个元素的样式选择器问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
用JavaScript隐藏控件的方法
Sep 21 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 #Javascript
vue 组件开发原理与实现方法详解
Nov 29 #Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 #Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 #Javascript
js中关于Blob对象的介绍与使用
Nov 29 #Javascript
js blob类型url的视频下载问题的解决
Nov 29 #Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 #Javascript
You might like
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
smarty缓存用法分析
2014/12/16 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
PDO::errorCode讲解
2019/01/28 PHP
php数组和链表的区别总结
2019/09/20 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
DOM事件探秘篇
2017/02/15 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python感知机实现代码
2019/01/18 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
自我鉴定怎么写
2013/12/05 职场文书
医学类个人求职信范文
2014/02/05 职场文书
入职担保书范文
2014/05/21 职场文书
2014年车间工作总结
2014/11/21 职场文书
刑事起诉书范文
2015/05/19 职场文书
Python的三个重要函数详解
2022/01/18 Python