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值的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
js实现飞机大战游戏
Aug 26 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
php zip文件解压类代码
2009/12/02 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
jQuery 选择器理解
2010/03/16 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
多版本Python共存的配置方法
2017/05/22 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
Python pickle模块实现对象序列化
2019/11/22 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
python em算法的实现
2020/10/03 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
捐款倡议书
2014/04/14 职场文书
社会工作专业自荐信
2014/09/26 职场文书
孔子观后感
2015/06/08 职场文书