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

<!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>

 

posted @ 2017-09-29 16:05  DoubleLife  阅读(3361)  评论(0编辑  收藏  举报