vue 遍历元素,控制当前元素下span的显示隐藏
{{item.content}} export default { data(){ return { items:[ { content:'this is a item1', show:true }, {
·
<template>
<div>
<ul>
<li v-for="item in items" @click="toggle(item)">
<span v-show="item.show">{{item.content}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
items:[
{
content:'this is a item1',
show:true
},
{
content:'this is a item2',
show:true
},
{
content:'this is a item3',
show:true
}
]
}
},
methods:{
toggle(item){
item.show=!item.show;
}
}
}
</script>
<style scoped>
</style>
<div>
<ul>
<li v-for="item in items" @click="toggle(item)">
<span v-show="item.show">{{item.content}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
items:[
{
content:'this is a item1',
show:true
},
{
content:'this is a item2',
show:true
},
{
content:'this is a item3',
show:true
}
]
}
},
methods:{
toggle(item){
item.show=!item.show;
}
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)