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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
js函数般调用正则
Apr 08 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 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购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
如何编写jquery插件
2017/03/29 jQuery
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
React简单介绍
2017/05/24 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
js实现秒表计时器
2019/12/16 Javascript
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Python实现建立SSH连接的方法
2015/06/03 Python
Python 中的with关键字使用详解
2016/09/11 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
python实现车牌识别的示例代码
2019/08/05 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
申报职称专业技术个人的自我评价
2013/12/12 职场文书
委托书如何写
2014/08/30 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
社区植树节活动总结
2015/02/06 职场文书
应聘教师自荐信
2015/03/26 职场文书
Python绘制散乱的点构成的图的方法
2022/04/21 Python