vue中给v-for渲染的元素动态添加移除类名

今天在项目中需要做一个效果，点击对应的li改变当前的color，其他的li取消颜色，在jQuery中这很容易，由于之前已经引入了jQuery，所以直接想到了这个办法。
但是出于未知的原因，jQuery获取不到v-for出来的数据，根本找不到dom节点，所以不得不改变思路。

然后我想到了V-bind的方法。下面贴上步骤。
1.在data里面生明一个属性，默认值最好为数字类型，并且不得大于当前元素+所有兄弟元素的length，可以默认为0（第一个元素选中）

 current: '0', //如果不想默认被选中，就把值设为一个超出所有元素length的数字

2.在当前元素中添加动态class： “:class”，根据vue的class和style的绑定特性写出类似“v-bind:class="{ classred:index==current}"”，当然其他方法很多，可以根据文档自行选择

<ul class="list"><li v-for="(item,index) in list" :key="index" @click="handleList(index)" :class="{red:index==current}">{{item.name}}</li>‘red’是你要给的类名
</ul>

3.给元素点击事件，传入当前元素的index，把元素当前的index赋值给data里面的申明的属性

 handleList (index) {this.current = index;},

这样就大功告成了，下面展示完整代码

<!--  -->
<template><div><ul><li v-for="(item,index) in liList"  v-on:click="addClass(index)" v-bind:class="{ classred:index==current}">{{item.name}}</li></ul></div>
</template>
<script>
export default {components: {},data () {return {liList:[{name:'张三'},{name:'李四'},{name:'王五'}],current:0,};},methods: {addClass:function(index){ this.current=index;}}
}</script>
<style scoped>.classred{ color:red; }
</style>

vue中给v-for渲染的元素动态添加移除类名相关推荐

vue中给v-for循环出来的元素分别加样式
vue中给v-for循环出来的元素分别加样式 1.绑动态样式` <div :class="box" v-for="(item, index) in datas&qu ...
vue中父子组件先后渲染_vue父子组件钩子函数的执行顺序
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...
Vue 中强制组件重新渲染的正确方法
作者:Michael Thiessen 译者:前端小智来源:hackernoon 有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当 ...
vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
vue中父子组件先后渲染_Vue中父子组件执行的先后顺序
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
vue中的dom基本渲染
一.输出动态标签请只对可信内容使用HTML插值,绝不要对用户提供的内容使用插值,容易导致xss攻击. <div id="J_app"><div v-html=& ...
详解vue组件的is特性：限制元素动态组件
在vue.js组件教程的一开始提及到了is特性意思就是有些元素,比如 ul 里面只能直接包含 li元素,像这样: <ul><li></li> </ul> ...
javascript --- vue中简单的模板渲染
一层的渲染将下面的模板中的mustache语法使用给定数据渲染. 模板如下 <div id="root"><div><div><p> ...
Vue中使用v-for生成dom删除元素错乱的问题
项目上需要一个条件树的组件,多个条件这里使用一个数组去保存,然后使用v-for循环数组插入dom. vue组件里使用v-for时很容易忽略了每一项的key值,遇到的问题如果后续需要对数组进行删除操作的 ...

vue中给v-for渲染的元素动态添加移除类名

vue中给v-for渲染的元素动态添加移除类名

vue中给v-for渲染的元素动态添加移除类名相关推荐

最新文章

热门文章

vue中 给v-for渲染的元素动态添加移除类名

vue中 给v-for渲染的元素动态添加移除类名

vue中 给v-for渲染的元素动态添加移除类名相关推荐

最新文章

热门文章

vue中给v-for渲染的元素动态添加移除类名

vue中给v-for渲染的元素动态添加移除类名

vue中给v-for渲染的元素动态添加移除类名相关推荐