vue动态添加 li 被选样式
css:<style type="text/css">ul li {cursor: pointer;}.blue {color: #2175bc;}</style>html:<div id="app"><ul><li v-for="(todo, index) in todos" ...
·
css:
<style type="text/css"> ul li {cursor: pointer;} .blue {color: #2175bc;} </style>
html:
<div id="app"> <ul> <li v-for="(todo, index) in todos" v-on:click="addClass(index,$event)" v-bind:class="{ blue:index==current}"> {{ todo.text }} </li> </ul> </div>
vue:
<script> new Vue({ el: '#app', data: { current:0, todos: [ { text: '选项一' }, { text: '选项二' }, { text: '选项三' } ] }, methods:{ addClass:function(index,event){ this.current=index; //获取点击对象 var el = event.currentTarget; alert("当前对象的内容:"+el.innerHTML); } } }) </script>
更多推荐
已为社区贡献3条内容
所有评论(0)