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

jQuery EasyUI API 中文文档 - NumberBox数字框

Oct 13 Javascript

jquery mobile实现拨打电话功能的几种方法

Aug 05 Javascript

javascript中打印当前的时间实现思路及代码

Dec 18 Javascript

Node.js的Web模板引擎ejs的入门使用教程

Jun 06 Javascript

AngularJS入门教程之服务(Service)

Jul 27 Javascript

JavaScript实现隐藏省略文字效果的方法

Apr 27 Javascript

使用Browserify来实现CommonJS的浏览器加载方法

May 14 Javascript

vue组件中使用iframe元素的示例代码

Dec 13 Javascript

JS实现HTML页面中动态显示当前时间完整示例

Jul 30 Javascript

微信小程序实现文件、图片上传功能

Aug 18 Javascript

vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作

Sep 12 Javascript

js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)

Dec 24 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获取网络上文件

2006/10/09 PHP

php简单静态页生成过程

2008/03/27 PHP

PHP中MVC模式的模板引擎开发经验分享

2011/03/23 PHP

apache+codeigniter 通过.htcaccess做动态二级域名解析

2012/07/01 PHP

codeigniter中view通过循环显示数组数据的方法

2015/03/20 PHP

Laravel最佳分割路由文件（routes.php）的方式

2016/08/04 PHP

Thinkphp微信公众号支付接口

2016/08/04 PHP

PDO::lastInsertId讲解

2019/01/29 PHP

php实现将数组或对象写入到文件的方法小结【三种方法】

2020/04/22 PHP

IE8 中使用加速器(Activities)

2010/05/14 Javascript

动态加载外部javascript文件的函数代码分享

2011/07/28 Javascript

JS原型对象通俗"唱法"

2012/12/27 Javascript

JS实现随机化快速排序的实例代码

2013/08/01 Javascript

JavaScript 动态加载脚本和样式的方法

2015/04/13 Javascript

使用jQuery操作HTML的table表格的实例解析

2016/03/13 Javascript

Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)

2016/03/24 Javascript

如何在Angular应用中创建包含组件方法示例

2019/03/23 Javascript

JS实现基本的网页计算器功能示例

2020/01/16 Javascript

vue select 获取value和lable操作

2020/08/28 Javascript

利用H5api实现时钟的绘制(javascript)

2020/09/13 Javascript

10分钟学会js处理json的常用方法

2020/12/06 Javascript

[00:10]DOTA2全国高校联赛以DOTA2会友

2018/05/30 DOTA

pycharm中成功运行图片的配置教程

2018/10/28 Python

python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例

2020/03/08 Python

Python面向对象程序设计之类和对象、实例变量、类变量用法分析

2020/03/23 Python

Selenium基于PIL实现拼接滚动截图

2020/04/10 Python

CSS3 文字动画效果

2020/11/12 HTML / CSS

JD Sports芬兰：英国领先的运动鞋和运动服饰零售商

2018/11/16 全球购物

女大学生个人求职信

2013/12/09 职场文书

医学生职业规划范文

2014/01/05 职场文书

2013年军训通讯稿

2014/02/05 职场文书

消防安全宣传标语

2014/06/07 职场文书

2014年党务公开工作总结

2014/12/09 职场文书

护士爱岗敬业心得体会

2016/01/25 职场文书

星际争霸 Light vs Action 一场把教主看到鬼畜的比赛

2022/04/01 星际争霸

win10电脑关机快捷键是哪个 win10快速关机的几种方法

2022/08/14 数码科技