Vue v-for 时，单个元素class的控制
2017-08-22 13:27
183 查看
Vue v-for 时，单个元素class的控制
只要一句表达式，加一个控制控制变量<template>
<ul>
<li v-for="(item,index) in arr" :class="{red:index==indexPrev}"
v-on:click="changeColor(index)">{{item}}</li></ul>
</template>
<script>
export default {
data(){
return {
arr:['0','1','3'],
indexPrev:1
}
},
methods:{
changeColor(index){this.indexPrev=index}
}
}
</script>
<style>
.red{color:red}
</style>:class=”{red:index==indexPrev}” 其中indexPrev 为class 作用到的元素的索引。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 在v-for中利用index来对第一项添加class(vue2.0)
- Vuejs v-for中利用index来对第一项添加class
- vue 遍历元素，控制当前元素下span的显示隐藏
- 关于vue点击控制单个样式
- Vue中控制v-for循环次数的实现方法
- 关于Vue的v-for渲染出多个元素之后如何单独添加属性
- js选取多个或单个元素的实现代码（用class）
- vue学习笔记1——v-if和templete 条件渲染 使用 key 控制元素的可重用
- vue学习六 元素点击触发事件(无v-for父子关系)
- 使用 Vue 绑定单个或多个 Class 名的实例代码
- JS利用class控制多个子元素的显示隐藏在IE6下的bug
- 解决vue点击控制单个样式的问题
- css利用id和class来控制元素样式技巧总结
- vue中获取v-for中的dom元素
- Vue v-for中的 input 或 textarea 元素的值发生改变时触发事件
- 【程序29】 TestAdd3.java 题目：求一个3*3矩阵对角线元素之和 1.程序分析：利用双重for循环控制输入二维数组， //再将a[i][i]累加后输出。
- Vue 菜单栏点击切换单个class（高亮），超简单！
- Vue 菜单栏点击切换单个class(高亮)的方法
- Vue.js入门学习--列表渲染--v-for遍历数组生成元素（四）
- js选取多个或单个元素的实现代码（用class）