<li @click="show"><span>1span> li><li @click="show"><span>1span> li><li @click="show"><span>1span> li>
li点击只让当前的 li 下面的span 隐藏
方法一:用vue就尽量遵从数据驱动的想法,实现这个的方法很多,但是尽量不要直接去操作dom。
<div id="app"><ul><li v-for="list in lists" @click="show($index)"><span v-show="$index !== i">{{ list }}span>li>ul> div> <script> new Vue({el: '#app',data: {lists: [1, 1, 1],i: -1 },methods: {show (index) {this.i = index}} }) script>
方法2:
<ul id="app"><li v-for='item in items' @click="toggle(item)"><span v-if='item.show'>{{item.content}}span>li> ul>
new Vue({el: '#app',data: function() {return {items: [{content: '1 item',show: true}, {content: '2 item',show: true}, {content: '3 item',show: true}]}},methods: {toggle: function(item) {item.show = !item.show;}} })