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

使用IE的地址栏来辅助调试Web页脚本

Mar 08 Javascript

改善用户体验的五款jQuery插件分享

May 22 Javascript

判断输入是否为空,获得输入类型的JS代码

Oct 30 Javascript

jquery 页面滚动到底部自动加载插件集合

Jan 31 Javascript

JavaScript函数的4种调用方法详解

Apr 22 Javascript

ff chrome和ie下全局动态定位的异同及全局高度的取法

Jun 30 Javascript

CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

May 12 Javascript

JavaScript简单下拉菜单实例代码

Sep 07 Javascript

bootstrap table表格插件之服务器端分页实例代码

Sep 12 Javascript

layui table数据修改的回显方法

Sep 04 Javascript

vue使用element-ui实现表单验证

Dec 13 Vue.js

JavaScript异步操作中串行和并行

Nov 20 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