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

几个高效，简洁的字符处理函数

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 职场文书