编程 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的简单图片切换效果

Jan 06 Javascript

IE6、IE7中获取Button元素的值的bug说明

Aug 28 Javascript

JS字符串处理实例代码

Aug 05 Javascript

通过遮罩层实现浮层DIV登录的js代码

Feb 07 Javascript

jQuery及JS实现循环中暂停的方法

Feb 02 Javascript

JavaScript时间操作之年月日星期级联操作

Jan 15 Javascript

Angular2使用Augury来调试Angular2程序

May 21 Javascript

jQuery实现的鼠标滚轮控制图片缩放功能实例

Oct 14 jQuery

CKeditor富文本编辑器使用技巧之添加自定义插件的方法

Jun 14 Javascript

JS使用Chrome浏览器实现调试线上代码

Jul 23 Javascript

vue-cli3访问public文件夹静态资源报错的解决方式

Sep 02 Javascript

JavaScript代码简化技巧实例解析

Sep 09 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

PHP5常用函数列表(分享)

2013/06/07 PHP

PHP 下载文件时自动添加bom头的方法实例

2014/01/10 PHP

symfony2.4的twig中date用法分析

2016/03/18 PHP

PHP页面间传递值和保持值的方法

2016/08/24 PHP

CakePHP框架Session设置方法分析

2017/02/23 PHP

PHP容器类的两种实现方式示例

2019/07/24 PHP

强制设为首页代码

2006/06/19 Javascript

javascript 文档的编码问题解决

2009/03/01 Javascript

javascript 面向对象全新理练之原型继承

2009/12/03 Javascript

JavaScript获取和设置CheckBox状态的简单方法

2013/07/05 Javascript

调用jQuery滑出效果时闪烁的解决方法

2014/03/27 Javascript

JavaScript统计网站访问次数的实现代码

2015/11/18 Javascript

javascript创建对象的几种模式介绍

2016/05/06 Javascript

laypage分页控件使用实例详解

2016/05/19 Javascript

Node.js Sequelize如何实现数据库的读写分离

2016/10/23 Javascript

JavaScript中关于iframe滚动条的去除和保留

2016/11/17 Javascript

JavaScript常见的五种数组去重的方式

2016/12/15 Javascript

nodeJs链接Mysql做增删改查的简单操作

2017/02/04 NodeJs

js实现从左向右滑动式轮播图效果

2017/07/07 Javascript

基于js实现的图片拖拽排序源码实例

2020/11/04 Javascript

[01:45]2014DOTA2 TI预选赛预选赛大神专访第二弹!

2014/05/20 DOTA

[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/17 DOTA

在ironpython中利用装饰器执行SQL操作的例子

2015/05/02 Python

python实现三维拟合的方法

2018/12/29 Python

python OpenCV GrabCut使用实例解析

2019/11/11 Python

Django User 模块之 AbstractUser 扩展详解

2020/03/11 Python

Django-rest-framework中过滤器的定制实例

2020/04/01 Python

python装饰器代码深入讲解

2021/03/01 Python

汤米巴哈马官方网站：Tommy Bahama

2017/05/13 全球购物

Vilebrequin欧洲官网：法国豪华泳装品牌（男士沙滩裤）

2018/04/14 全球购物

wedgwood加拿大官网：1759年成立的英国国宝级陶瓷餐具品牌

2018/07/17 全球购物

财务会计专业应届毕业生求职信

2013/10/18 职场文书

《画杨桃》教学反思

2014/04/13 职场文书

产品陈列协议书（标准版）

2014/09/17 职场文书

QT连接MYSQL数据库的详细步骤

2021/07/07 MySQL

「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开

2022/03/21 日漫