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

javascript 限制输入和粘贴(IE,firefox测试通过)

Nov 14 Javascript

提高网站性能之如何对待JavaScript

Oct 31 Javascript

jquery简单实现鼠标经过导航条改变背景图

Dec 17 Javascript

window.open 以post方式传递参数示例代码

Feb 27 Javascript

用console.table()调试javascript

Sep 04 Javascript

angularjs实现多张图片上传并预览功能

Feb 24 Javascript

详谈jQuery中使用attr(), prop(), val()获取value的异同

Apr 25 jQuery

JavaScript实现省市联动过程中bug的解决方法

Dec 04 Javascript

JavaScript时间戳与时间日期间相互转换

Dec 11 Javascript

8 个有用的JS技巧(推荐)

Jul 03 Javascript

从零搭一个自用的前端脚手架的方法步骤

Sep 23 Javascript

javascript设计模式 ? 适配器模式原理与应用实例分析

Apr 13 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使用MySQL保存session会话的方法

2015/06/18 PHP

php curl上传、下载、https登陆实现代码

2017/07/23 PHP

javascript事件模型代码

2007/07/01 Javascript

Javascript学习笔记-详解in运算符

2011/09/13 Javascript

javascript开发随笔二动态加载js和文件

2011/11/25 Javascript

常见JS效果之图片减速度滚动实现代码

2011/12/08 Javascript

使用Post提交时须将空格转换成加号的解释

2013/01/14 Javascript

javascript模拟枚举的简单实例

2014/03/06 Javascript

使用CSS3的scale实现网页整体缩放

2014/03/18 Javascript

js或jquery实现页面打印可局部打印

2014/03/27 Javascript

jQuery实现的超酷苹果风格图标滑出菜单效果代码

2015/09/16 Javascript

基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理

2016/05/12 Javascript

AngularJs解决跨域问题案例详解(简单方法)

2016/05/19 Javascript

利用jQuery插件imgAreaSelect实现获得选择域的图像信息

2016/12/02 Javascript

详解JS中的快速排序与冒泡

2017/01/10 Javascript

详解RequireJS按需加载样式文件

2017/04/12 Javascript

jQuery DOM节点的遍历方法小结

2017/08/15 jQuery

详解Vue文档中几个易忽视部分的剖析

2018/03/24 Javascript

微信小程序排坑指南详解

2018/05/23 Javascript

js脚本中执行java后台代码方法解析

2019/10/11 Javascript

Python实现随机生成有效手机号码及身份证功能示例

2017/06/05 Python

Python简单删除列表中相同元素的方法示例

2017/06/12 Python

Python之csv文件从MySQL数据库导入导出的方法

2018/06/21 Python

解决Python找不到ssl模块问题 No module named _ssl的方法

2019/04/29 Python

详解pandas DataFrame的查询方法（loc,iloc,at,iat,ix的用法和区别）

2019/08/02 Python

Python assert关键字原理及实例解析

2019/12/13 Python

ECCO爱步官方旗舰店：丹麦鞋履品牌

2018/01/02 全球购物

P D PAOLA法国官网：西班牙著名的珠宝首饰品牌

2020/02/15 全球购物

房屋租赁协议书范本

2014/04/10 职场文书

学习雷锋倡议书

2014/04/15 职场文书

人力资源求职信

2014/05/25 职场文书

大学推普周活动总结

2015/05/07 职场文书

活动总结模板大全

2015/05/11 职场文书

新闻报道稿范文

2015/07/23 职场文书

Redis缓存-序列化对象存储乱码问题的解决

2021/06/21 Redis