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

动态加载图片路径保持JavaScript控件的相对独立性

Sep 06 Javascript

关于JS管理作用域的问题

Apr 10 Javascript

jquery移动listbox的值原理及代码

May 03 Javascript

JQuery实现鼠标滑过显示导航下拉列表

Sep 12 Javascript

jquery链式操作的正确使用方法

Jan 06 Javascript

超棒的响应式布局jQuery插件Freetile.js

Nov 17 Javascript

轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器

Nov 30 Javascript

Bootstrap的modal拖动效果

Dec 25 Javascript

JS调用Android、Ios原生控件

Jan 06 Javascript

BootStrap注意事项小结（五）表单

Mar 10 Javascript

微信小程序bindtap事件与冒泡阻止详解

Aug 08 Javascript

Vue3 中的数据侦测的实现

Oct 09 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

常用表单验证类，有了这个，一般的验证就都齐了。

2006/12/06 PHP

2010/12/29 PHP

php中flush()、ob_flush()、ob_end_flush()的区别介绍

2013/02/17 PHP

php var_export与var_dump 输出的不同

2013/08/09 PHP

php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法

2013/09/28 PHP

PHP提高编程效率的20个要点

2015/09/23 PHP

php + ajax 实现的写入数据库操作简单示例

2020/05/16 PHP

解决jquery .ajax 在IE下卡死问题的解决方法

2009/10/26 Javascript

JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版

2010/04/02 Javascript

让js弹出窗口居前显示的实现方法

2013/07/10 Javascript

将json当数据库一样操作的javascript lib

2013/10/28 Javascript

jquery使用jquery.zclip插件复制对象的实例教程

2013/12/04 Javascript

跟我学习javascript的异步脚本加载

2015/11/20 Javascript

AngularJS动态加载模块和依赖的方法分析

2016/11/08 Javascript

AngularJS Toaster使用详解

2017/02/24 Javascript

浅谈react.js 之批量添加与删除功能

2017/04/17 Javascript

vue-cli 构建骨架屏的方法示例

2018/11/08 Javascript

小程序实现授权登陆的解决方案

2018/12/02 Javascript

JS中的算法与数据结构之链表(Linked-list)实例详解

2019/08/20 Javascript

javscript 数组扁平化的实现

2020/02/03 Javascript

vue+springboot图片上传和显示的示例代码

2020/02/14 Javascript

分享一款超好用的JavaScript 打包压缩工具

2020/04/26 Javascript

JavaScript 类的封装操作示例详解

2020/05/16 Javascript

微信小程序完美解决scroll-view高度自适应问题的方法

2020/08/08 Javascript

[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01

2020/11/02 DOTA

Python中给List添加元素的4种方法分享

2014/11/28 Python

Python模拟百度登录实例详解

2016/01/20 Python

Python搭建APNS苹果推送通知推送服务的相关模块使用指南

2016/06/02 Python

Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】

2017/06/07 Python

如何基于Python批量下载音乐

2019/11/11 Python

Python3 元组tuple入门基础

2020/02/09 Python

python的help函数如何使用

2020/06/11 Python

python 批量将中文名转换为拼音

2021/02/07 Python

实习护士自我鉴定

2013/10/13 职场文书

行风评议整改报告

2014/11/06 职场文书

Python 阶乘详解

2021/10/05 Python