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

三种方式获取XMLHttpRequest对象

Apr 21 Javascript

自己使用js/jquery写的一个定制对话框控件

May 02 Javascript

Jquery easyui 实现动态树

Nov 17 Javascript

使用bootstrap3开发响应式网站

May 12 Javascript

AngularJS基础 ng-mouseleave 指令详解

Aug 02 Javascript

利用python分析access日志的方法

Oct 26 Javascript

网页挂马方式整理及详细介绍

Nov 03 Javascript

关于 jQuery Easyui异步加载tree的问题解析

Dec 06 Javascript

jQuery简单实现MD5加密的方法

Mar 03 Javascript

vue.js中v-on:textInput无法执行事件问题的解决过程

Jul 12 Javascript

ES6扩展运算符的用途实例详解

Aug 20 Javascript

利用Blob进行文件上传的完整步骤

Aug 02 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

Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划！

2020/03/06 日漫

php＋dbfile开发小型留言本

2006/10/09 PHP

PHP EOT定界符的使用详解

2008/09/30 PHP

php获取post中的json数据的实现方法

2011/06/08 PHP

PHP对象的浅复制与深复制的实例详解

2017/10/26 PHP

JAVASCRIPT 对象的创建与使用

2021/03/09 Javascript

JavaScript实际应用：innerHTMl和确认提示的使用

2006/06/22 Javascript

JS遮罩层效果兼容ie firefox jQuery遮罩层

2010/07/26 Javascript

JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码

2015/09/17 Javascript

jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

2016/06/02 Javascript

通过bootstrap全面学习less

2016/11/09 Javascript

jQuery实现用户输入自动完成功能

2017/02/13 Javascript

Vue2.0组件间数据传递示例

2017/03/07 Javascript

JS判断非空至少输入两个字符的简单实现方法

2017/06/23 Javascript

React中上传图片到七牛的示例代码

2017/10/10 Javascript

浅谈Angular 中何时取消订阅

2017/11/22 Javascript

Vue实现底部侧边工具栏的实例代码

2018/09/03 Javascript

解决layui批量传值到后台操作时出现传值为空的问题

2019/09/28 Javascript

ant design vue datepicker日期选择器中文化操作

2020/10/28 Javascript

[01:45]IMBATV TI4前线报道－选手到达

2014/07/07 DOTA

[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3

2018/06/04 DOTA

Python中类型关系和继承关系实例详解

2015/05/25 Python

Anaconda下安装mysql-python的包实例

2018/06/11 Python

windows下pycharm安装、创建文件、配置默认模板

2018/07/31 Python

如何通过命令行进入python

2020/07/06 Python

Html5大文件断点续传实现方法

2015/12/05 HTML / CSS

英国知名衬衫品牌美国网站：Charles Tyrwhitt美国

2016/08/28 全球购物

英国厨房与餐具用品为主的设计品牌：Joseph Joseph

2018/04/26 全球购物

金蝶的一道SQL笔试题

2012/12/18 面试题

正风肃纪查摆剖析材料

2014/10/10 职场文书

2014年体检中心工作总结

2014/12/23 职场文书

超市收银员岗位职责

2015/04/07 职场文书

六一儿童节园长致辞

2015/07/31 职场文书

老兵退伍感言

2015/08/03 职场文书

宣传部部长竞选稿

2015/11/21 职场文书

Python list列表删除元素的4种方法

2021/11/01 Python