编程 Javascript

VUE在for循环里面根据内容值动态的加入class值的方法

Posted in Javascript onAugust 12, 2018

最近在做玩家蚂蚁项目的时候遇到了一个评分显示的小功能，这个在前端显示的星星是用class样式来进行控制的

class =” real-star comment-stars-width5 ”

数据库里记录的信息只有一个评分1-5。我们如果用一般的php方法直接在class里面用 comment-stars-width{$score}这样是行不通的。在查了很多资料和做过很多尝试以后，确定了一个可行的方法

我们使用vue的:class来进行class的绑定。:class=”`comment-stars-width`+s.score” 然后把前面需要的属性前缀用 “包裹起来，后面的值用+号连起来，这样渲染出来的数据就是我们想要的数据样式了！

总结

以上所述是小编给大家介绍的VUE在for循环里面根据内容值动态的加入class值的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

VUE在for循环里面根据内容值动态的加入class值的方法

- Author -

admin

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript在事件监听方面的兼容性小结

Apr 07 Javascript

关于COOKIE个数与大小的问题

Jan 17 Javascript

通过jquery还原含有rowspan、colspan的table的实现方法

Feb 10 Javascript

用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例

Jun 25 Javascript

Firefox下无法正常显示年份的解决方法

Sep 04 Javascript

轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）

Nov 30 Javascript

javascript数据结构中栈的应用之符号平衡问题

Apr 11 Javascript

基于复选框demo(分享)

Sep 27 Javascript

vue引用js文件的多种方式(推荐)

May 17 Javascript

IntelliJ IDEA编辑器配置vue高亮显示

Sep 26 Javascript

vue实现div单选多选功能

Jul 16 Javascript

H5 js点击按钮复制文本到粘贴板

Nov 19 Javascript

JS中的两种数据类型及实现引用类型的深拷贝的方法

Aug 12 #Javascript

原生JS封装_new函数实现new关键字的功能

Aug 12 #Javascript

axios向后台传递数组作为参数的方法

Aug 11 #Javascript

让axios发送表单请求形式的键值对post数据的实例

Aug 11 #Javascript

axios的拦截请求与响应方法

Aug 11 #Javascript

解决axios发送post请求返回400状态码的问题

Aug 11 #Javascript

vue 组件的封装之基于axios的ajax请求方法

Aug 11 #Javascript

You might like

php去掉字符串的最后一个字符附substr()的用法

2011/03/23 PHP

在Win7 中为php扩展配置Xcache

2014/10/08 PHP

使用php的HTTP请求的库Requests实现美女图片墙

2015/02/22 PHP

PHP实现找出有序数组中绝对值最小的数算法分析

2017/08/07 PHP

XAMPP升级PHP版本实现步骤解析

2020/09/04 PHP

javascript Error 对象错误处理

2008/05/18 Javascript

jquery提升性能最佳实践小结

2010/12/06 Javascript

JavaScript动态插入script的基本思路及实现函数

2013/11/11 Javascript

JavaScript中Number.MAX_VALUE属性的使用方法

2015/06/04 Javascript

js获取字符串字节数方法小结

2015/06/09 Javascript

JavaScript中setMonth()方法的使用详解

2015/06/11 Javascript

node.js抓取并分析网页内容有无特殊内容的js文件

2015/11/17 Javascript

JavaScript模拟数组合并concat

2016/03/06 Javascript

JS定时器用法分析【时钟与菜单中的应用】

2016/12/21 Javascript

JQuery页面随滚动条动态加载效果的简单实现(推荐)

2017/02/08 Javascript

原生js实现轮播图的示例代码

2017/02/20 Javascript

vue时间格式化实例代码

2017/06/13 Javascript

总结js函数相关知识点

2018/02/27 Javascript

Node.js 多线程完全指南总结

2019/03/27 Javascript

详解如何在Javascript和Sass之间共享变量

2019/11/13 Javascript

Python中非常实用的一些功能和函数分享

2015/02/14 Python

python计算文本文件行数的方法

2015/07/06 Python

python得到qq句柄,并显示在前台的方法

2018/10/14 Python

Python英文文本分词(无空格)模块wordninja的使用实例

2019/02/20 Python

来自美国主售篮球鞋的零售商店：KICKSUSA

2017/11/28 全球购物

护士的自我鉴定

2014/02/07 职场文书

机电专业毕业生求职信

2014/07/01 职场文书

2014领导班子专题民主生活会对照检查材料思想汇报

2014/09/23 职场文书

2014县政府领导班子对照检查材料思想汇报

2014/09/25 职场文书

2014幼儿园保育员工作总结

2014/11/10 职场文书

2015年教师党员承诺书

2015/04/27 职场文书

2015年党风廉政建设目标责任书

2015/05/08 职场文书

2015年教师党员个人总结

2015/11/24 职场文书

2016五一劳动节慰问信

2015/11/30 职场文书

Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法

2022/07/07 数码科技

Pygame游戏开发之太空射击实战敌人精灵篇

2022/08/05 Python