vue 渲染出来的列表点击的时候需要单独给li添加一个class

最新推荐文章于 2023-10-28 11:51:34 发布

dianfu4327

最新推荐文章于 2023-10-28 11:51:34 发布

阅读量288

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wenb/p/7611477.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
</head>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

<div id="app">  
<p v-for='(data,key,index) in datas' v-on:click="addClassFun(index)" v-bind:class='{class1:index==qwerqwre}'>{{data.data}}</p>  
</div>  
  
<script>  
new Vue({  
el: '#app',  
data: {  
datas: {  
data1: {  
data: "测试1",  
ifAdd: 0  
},  
data2: {  
data: "测试2",  
ifAdd: 1  
},  
data3: {  
data: "测试3",  
ifAdd: 2  
}  
},  
qwerqwre:"0"  
},  
  
  
methods: {  
addClassFun: function(index) {  
this.qwerqwre = index;  
}  
}  
})  
</script>  
</body>
</html>

转载于:https://www.cnblogs.com/wenb/p/7611477.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dianfu4327

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 渲染出来的列表点击的时候需要单独给li添加一个class

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title></head><style>.class1{ background: #444; color: #eee;...
复制链接

扫一扫