编程 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 相关文章推荐

brook javascript框架介绍

Oct 10 Javascript

jQuery实现的省市县三级联动菜单效果完整实例

Aug 01 Javascript

JavaScript表单验证开发

Nov 23 Javascript

利用vue写todolist单页应用

Dec 15 Javascript

vue2.0父子组件及非父子组件之间的通信方法

Jan 21 Javascript

JavaScript获取ul中li个数的方法

Feb 13 Javascript

js获取隐藏元素的宽高

Feb 24 Javascript

基于Bootstrap框架菜鸟入门教程(推荐)

Sep 17 Javascript

js Dom实现换肤效果

Oct 21 Javascript

关闭Vue计算属性自带的缓存功能方法

Mar 02 Javascript

详解AngularJS 过滤器的使用

Jun 02 Javascript

javascript显示动态时间的方法汇总

Jul 06 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

POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)

2010/10/12 PHP

jquery 页面滚动到指定DIV实现代码

2013/09/25 Javascript

js文本框输入点回车触发确定兼容IE、FF等

2013/11/19 Javascript

js实现div弹出层的方法

2014/11/20 Javascript

结合代码图文讲解JavaScript中的作用域与作用域链

2016/07/05 Javascript

JS实现全屏的四种写法

2016/12/30 Javascript

JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法

2017/04/28 Javascript

bootstrap fileinput实现文件上传功能

2017/08/23 Javascript

深入浅析JavaScript中的RegExp对象

2017/09/18 Javascript

第一个Vue插件从封装到发布

2017/11/22 Javascript

vue watch关于对象内的属性监听

2019/04/22 Javascript

Javascript Dom元素获取和添加详解

2019/09/24 Javascript

node.js使用http模块创建服务器和客户端完整示例

2020/02/10 Javascript

JS实现网页时钟特效

2020/03/25 Javascript

element el-table表格的二次封装实现(附表格高度自适应)

2021/01/19 Javascript

Python正则表达式分组概念与用法详解

2017/06/24 Python

python使用paramiko模块通过ssh2协议对交换机进行配置的方法

2019/07/25 Python

python可视化篇之流式数据监控的实现

2019/08/07 Python

Python字典添加，删除，查询等相关操作方法详解

2020/02/07 Python

基于pytorch padding=SAME的解决方式

2020/02/18 Python

详解CSS3中强大的filter(滤镜)属性

2017/06/29 HTML / CSS

HTML5新特性多线程（Worker SharedWorker）

2017/04/24 HTML / CSS

HTML5自定义属性的问题分析

2019/08/16 HTML / CSS

英国婴儿产品专家：Samuel Johnston

2020/04/20 全球购物

威盛公司软件C++工程师笔试题面试题

2012/07/16 面试题

初中地理教学反思

2014/01/11 职场文书

健康家庭事迹材料

2014/05/02 职场文书

感恩母亲节演讲稿

2014/05/07 职场文书

2014年教师节寄语

2014/08/11 职场文书

综治工作心得体会

2014/09/11 职场文书

党员干部对十八届四中全会的期盼

2014/10/17 职场文书

2014年平安建设工作总结

2014/11/19 职场文书

三八红旗手事迹材料

2014/12/26 职场文书

大学毕业生个人总结

2015/02/28 职场文书

物业前台接待岗位职责

2015/04/03 职场文书

《艾尔登法环》发布最新「战技」宣传片

2022/04/03 其他游戏