编程 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 模式对话框终极版实现代码

Sep 28 Javascript

javascript设计模式接口介绍

Jul 24 Javascript

jQuery响应enter键的实现思路

Apr 18 Javascript

node.js中的fs.symlinkSync方法使用说明

Dec 15 Javascript

JavaScript编写推箱子游戏

Jul 07 Javascript

jQuery实现三级菜单的代码

May 09 Javascript

JavaScript数组合并的多种方法

May 22 Javascript

用Vue.js实现监听属性的变化

Nov 17 Javascript

浅谈Node.js：Buffer模块

Dec 05 Javascript

vue-router实现组件间的跳转（参数传递）

Nov 07 Javascript

Thinkjs3新手入门之如何使用静态资源目录

Dec 06 Javascript

jQuery实现轮播图及其原理详解

Apr 12 jQuery

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实现ftp上传文件示例

2014/08/21 PHP

php导出生成word的方法

2015/12/25 PHP

再谈PHP中单双引号的区别详解

2016/06/12 PHP

浅谈PHP封装CURL

2019/03/06 PHP

JS效率个人经验谈（8-15更新），加入range技巧

2007/01/09 Javascript

$(document).ready(function() {})不执行初始化脚本

2014/06/19 Javascript

仿百度换肤功能的简单实例代码

2016/07/11 Javascript

微信小程序页面跳转传值实现代码

2017/07/27 Javascript

JavaScript你不知道的一些数组方法

2017/08/18 Javascript

纯js实现画一棵树的示例

2017/09/05 Javascript

微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】

2017/12/05 Javascript

anime.js 实现带有描边动画效果的复选框（推荐）

2017/12/24 Javascript

vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能

2018/03/01 Javascript

vue列表单项展开收缩功能之this.$refs的详解

2019/05/05 Javascript

JS匿名函数内部this指向问题详析

2019/05/10 Javascript

Node.js 实现抢票小工具 & 短信通知提醒功能

2019/10/22 Javascript

基于Angular 8和Bootstrap 4实现动态主题切换的示例代码

2020/02/11 Javascript

基于JS正则表达式实现模板数据动态渲染(实现思路详解)

2020/03/07 Javascript

javaScript代码飘红报错看不懂？读完这篇文章再试试

2020/08/19 Javascript

在vue中嵌入外部网站的实现

2020/11/13 Javascript

[05:08]顺网杯ISS-DOTA2赛歌少女偶像Lunar青春演绎

2013/12/05 DOTA

用python读写excel的方法

2014/11/18 Python

Python访问纯真IP数据库脚本分享

2015/06/29 Python

Python安装lz4-0.10.1遇到的坑

2018/05/20 Python

django session完成状态保持的方法

2018/11/27 Python

关于pytorch中网络loss传播和参数更新的理解

2019/08/20 Python

python集合常见运算案例解析

2019/10/17 Python

numpy库reshape用法详解

2020/04/19 Python

tensorflow基于CNN实战mnist手写识别(小白必看)

2020/07/20 Python

Python实现扫码工具的示例代码

2020/10/09 Python

css3 flex布局 justify-content:space-between 最后一行左对齐

2020/01/02 HTML / CSS

从当地商店送来的杂货：Instacart

2018/08/19 全球购物

工程管理造价应届生求职信

2013/11/13 职场文书

银行职员个人的工作自我评价

2014/02/15 职场文书

意外伤害赔偿协议书

2014/09/16 职场文书

2015年度党风廉政建设工作情况汇报

2015/01/02 职场文书