vue动态取class

（1）取一个class

<div v-bind:class="isRed?'colorRed':'colorGreen'">hello world
</div>

（2）取多个class

<div :class="{'red':true,'big':true}">hello world
</div>

（3）一个学生列表，每个都有成绩A或B，根据学生的成绩匹配不同的颜色

处理：通过遍历，根据当前对象的成绩，匹配成绩和样式的清单对象，用成绩做key，取对象的value,最终返回字符串的样式名

html:

<ul><li v-for="stu in stus" class="{'A':'colorRed','B':'colorGreen'}[stu.score]">{{stu.name}}</li>
</ul>

js:

export default{data(){return {stus:[{name:"jack",score:"A"},{name:"rose",score:"B"},]}}
}

vue动态取class相关推荐

vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换
引用地址:vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换 - 长空雁叫霜晨月 - 博客园项目预览地址:https://volodya-01.github.io/vue2.0_t ...
使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
vue动态切换css文件_vue实现样式之间的切换及vue动态样式的实现方法
编程之家收集整理的这篇文章主要介绍了vue实现样式之间的切换及vue动态样式的实现方法,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 前言既然我们选择了vue,那么在做东西时就不要想 ...
vue 动态修改路由参数
转载自 vue 动态修改路由参数 import merge from 'webpack-merge':修改原有参数 this.$router.push({query:merge(this.$rout ...
vue 动态组件组件复用_真正的动态声明性组件
vue 动态组件组件复用在这篇简短的文章中,我将重点介绍ADF动态声明性组件. 我的意思是一个众所周知的ADF标签af:declarativeComponent . 它可以用作将页面设计为页面片段和 ...
[vue] 动态给vue的data添加一个新的属性时会发生什么？怎样解决？
[vue] 动态给vue的data添加一个新的属性时会发生什么?怎样解决? 如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如果想要使添加的值做到响应式,应当使用$set()来添加对象. ...
[vue] 怎么解决vue动态设置img的src不生效的问题
[vue] 怎么解决vue动态设置img的src不生效的问题不是应该 require('@/assets/images/xxx.png') 这样吗??你这样多浪费资源啊 @chenqim 个人简介 ...
vue动态点击切换css样式且子元素动态显示和隐藏
vue动态点击切换css样式并子元素动态显示和隐藏 <template><div v-for="i in 5" class="el-personal&q ...

vue动态取class

vue动态取class相关推荐

最新文章

热门文章