编程 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与iframe交互实现代码

Dec 24 Javascript

Jquery 插件学习实例1 插件制作说明与tableUI优化

Apr 02 Javascript

js新闻滚动 js如何实现新闻滚动效果

Jan 07 Javascript

12种不宜使用的Javascript语法整理

Nov 04 Javascript

AngularJS学习笔记之依赖注入详解

May 16 Javascript

sencha ext js 6 快速入门(必看)

Jun 01 Javascript

微信小程序中页面FOR循环和嵌套循环

Jun 21 Javascript

Vue实现一个返回顶部backToTop组件

Jul 25 Javascript

微信小程序实现选项卡功能

Jun 19 Javascript

解决vue处理axios post请求传参的问题

Mar 05 Javascript

vue引入微信sdk 实现分享朋友圈获取地理位置功能

Jul 04 Javascript

node.js中npm包管理工具用法分析

Feb 14 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

第一个无线电台是由谁发明的

2021/03/01 无线电

真正的ZIP文件操作类(php)

2007/07/21 PHP

PHP MySQL应用中使用XOR运算加密算法分享

2011/08/28 PHP

PHP中source #N问题的解决方法

2014/01/27 PHP

妙用Jquery的val()方法

2012/06/27 Javascript

JavaScript高级程序设计（第3版）学习笔记9 js函数（下）

2012/10/11 Javascript

javascript函数作用域学习示例(js作用域)

2014/01/13 Javascript

jquery实现input输入框实时输入触发事件代码

2014/01/28 Javascript

jquery实现手机发送验证码的倒计时代码

2014/02/12 Javascript

javascript判断变量是否有值的方法

2015/04/20 Javascript

JS全局变量和局部变量最新解析

2016/06/24 Javascript

js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序

2016/08/17 Javascript

Angular 4依赖注入学习教程之组件服务注入（二）

2017/06/04 Javascript

详解Vue的computed(计算属性)使用实例之TodoList

2017/08/07 Javascript

Echarts基本用法_动力节点Java学院整理

2017/08/11 Javascript

NodeJs通过async/await处理异步的方法

2017/10/09 NodeJs

JS去掉字符串中所有的逗号

2017/10/18 Javascript

javascript、php关键字搜索函数的使用方法

2018/05/29 Javascript

Vue中跨域及打包部署到nginx跨域设置方法

2019/08/26 Javascript

vue-froala-wysiwyg 富文本编辑器功能

2019/09/19 Javascript

Python利用多进程将大量数据放入有限内存的教程

2015/04/01 Python

TensorFlow平台下Python实现神经网络

2018/03/10 Python

Python解析并读取PDF文件内容的方法

2018/05/08 Python

Python基于datetime或time模块分别获取当前时间戳的方法实例

2019/02/19 Python

Tensorflow使用Anaconda、pycharm安装记录

2020/07/29 Python

python 深度学习中的4种激活函数

2020/09/18 Python

Javascript 高级手势使用介绍

2013/04/21 HTML / CSS

中国制造网：Made-in-China.com

2019/10/25 全球购物

KOHLER科勒美国官网：国际著名卫浴橱柜领先品牌

2020/06/27 全球购物

人力资源管理毕业生自荐信

2013/11/21 职场文书

俄语专业职业生涯规划

2014/02/26 职场文书

简洁的英文求职信范文

2014/05/03 职场文书

法律顾问服务方案

2014/05/15 职场文书

2015年办公室工作总结范文

2015/03/31 职场文书

聚会通知怎么写

2015/04/23 职场文书

React + Threejs + Swiper 实现全景图效果的完整代码

2021/06/28 Javascript