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

window.location.hash 属性使用说明

Mar 20 Javascript

JS(JQuery)操作Array的相关方法介绍

Feb 11 Javascript

使用AngularJS创建单页应用的编程指引

Jun 19 Javascript

Javascript编程中几种继承方式比较分析

Nov 28 Javascript

JavaScript知识点整理

Dec 09 Javascript

JS实现关闭当前页而不弹出提示框的方法

Jun 22 Javascript

Vuejs第六篇之Vuejs与form元素实例解析

Sep 05 Javascript

vue.js 中使用（...）运算符报错的解决方法

Aug 09 Javascript

详解基于vue-cli3.0如何构建功能完善的前端架子

Oct 09 Javascript

超轻量级的js时间库miment使用解析

Aug 02 Javascript

js实现无限瀑布流实例方法

Sep 16 Javascript

element-ui和vue表单(对话框)验证提示语(残留)清除操作

Sep 11 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生成缩略图的代码

2011/01/12 PHP

php生成图形（Libchart）实例

2013/11/06 PHP

教你识别简单的免查杀PHP后门

2015/09/13 PHP

Laravel 模型关联基础教程详解

2019/09/17 PHP

PHP全局使用Laravel辅助函数dd

2019/12/26 PHP

jQuery获取css z-index在各种浏览器中的返回值

2010/09/15 Javascript

在jQuery1.5中使用deferred对象着放大镜看Promise

2011/03/12 Javascript

js去除空格的12种实用方法

2013/11/08 Javascript

JS实现在线统计一个页面内鼠标点击次数的方法

2015/02/28 Javascript

Bootstrap每天必学之滚动监听

2016/03/16 Javascript

js 上传文件预览的简单实例

2016/08/16 Javascript

Node.js的文件权限及读写flag详解

2016/10/11 Javascript

Vue.js组件tree实现省市多级联动

2016/12/02 Javascript

validationEngine 表单验证插件使用实例代码

2017/06/15 Javascript

React Native开发封装Toast与加载Loading组件示例

2018/09/08 Javascript

微信小程序点餐系统开发常见问题汇总

2019/08/06 Javascript

Flutter实现仿微信底部菜单栏功能

2019/09/18 Javascript

[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18

2018/08/19 DOTA

python中split方法用法分析

2015/04/17 Python

以911新闻为例演示Python实现数据可视化的教程

2015/04/23 Python

python构建自定义回调函数详解

2017/06/20 Python

Python安装图文教程 Pycharm安装教程

2018/03/27 Python

pygame库实现俄罗斯方块小游戏

2019/10/29 Python

基于python爬取链家二手房信息代码示例

2020/10/21 Python

Python实现异步IO的示例

2020/11/05 Python

巧用 CSS3的webkit-box-reflect 倒影实现各类动效

2021/03/05 HTML / CSS

美国运动鞋和服装网上商店：YCMC

2018/09/15 全球购物

英国泽西岛植物：Jersey Plants Direct

2019/08/07 全球购物

毕业生在校学习的自我评价分享

2013/10/08 职场文书

物理学专业求职信

2014/07/04 职场文书

12.4法制宣传日活动总结

2014/08/26 职场文书

外贸英文求职信范文

2015/03/19 职场文书

商场圣诞节活动总结

2015/05/06 职场文书

上甘岭观后感

2015/06/10 职场文书

2015重阳节敬老活动总结

2015/07/29 职场文书

python 制作一个gui界面的翻译工具

2021/05/14 Python