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 作用到的元素的索引。

Vue v-for 时，单个元素class的控制相关推荐

vue -V查看vue版本时，提示vue.js缺少标识符
vue -V查看vue版本时,提示vue.js缺少标识符出现的错误提示如下图. 我的解决办法: win+R打开 cmd 输入 where vue. 找到D:\a_tools\vue,删除该文件夹中的 ...
java中Hashset集合删除元素_从Java中的HashSet中删除单个元素
要从HashSet中删除单个元素,请使用remove()方法. 首先,创建一个HashSet-HashSet hs = new HashSet(); 现在,将元素添加到HashSet-hs.add(& ...
VScode输入vue -V提示vue : 无法加载文件
问题1: Suggestion [3,General]: 找不到命令 vue,但它确实存在于当前位置.默认情况下,Windows PowerShell 不会从当前位置加载命令.如果信任此命令,请改为 ...
vue 加载页面时触发时间_5.6 vue更新数组时触发视图更新的方法，熟记JavaScript原生方法...
问题:vue更新数组时触发视图更新的方法变异方法: Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.什么是变异方法呢?简单理解就是改变了原来的数组,可能包括数组长度length,或者 ...
安装Vue的脚手架时遇到的无法安装问题
项目场景:安装Vue的脚手架时遇到的无法安装问题问题描述以管理员身份进入命令控制符想要安装Vue的脚手架,提示安装成功后输入vue指令检查却显示:'vue' 不是内部或外部命令,也不是可运行的程序 ...
vue更新数组时触发视图更新的方法
参考原文: vue更新数组时触发视图更新的方法 - 大橙橙 - 博客园 vue数组对象修改触发视图更新 - 看风景就 - 博客园直接修改数组元素是无法触发视图更新的,如 this.array[0] ...
VUE 浏览器关闭时清空localStorage
1. 概述 1.1 说明 vue项目中,为了解决页面刷新时vuex数据丢失问题,使用localStorage进行存储对应的vuex数据(判断对应localStorage是否为空,不为空则为vuex中数 ...
vue 绑定事件，获取元素对象
vue 绑定事件,获取元素对象例如: <img v-bind:src="item.fmguid" v-on:error="imgerror($event)&quo ...
解决vue初始化数据时的闪烁问题
解决vue初始化数据时的闪烁问题参考文章: (1)解决vue初始化数据时的闪烁问题 (2)https://www.cnblogs.com/xxySsm/p/11971608.html 备忘一下.

Vue v-for 时，单个元素class的控制

Vue v-for 时，单个元素class的控制

Vue v-for 时，单个元素class的控制相关推荐

最新文章

热门文章