当先锋百科网

首页 1 2 3 4 5 6 7

Vue中的显示与隐藏是一个常见的操作,我们可以通过v-show或v-if来实现。但是在循环中,我们有时需要对每一个数据项进行显示或隐藏,这时候就需要使用v-for来循环渲染。下面我们来看一个实例。


{{item.text}}

vue显示隐藏循环

上面的代码中,我们在v-for中循环了一个列表list,然后使用v-show来控制每一个数据项item是否可见。同时,我们在每一个数据项下加了一个按钮,当点击按钮时,调用toggleVisible方法来切换item的可见状态。下面我们来看一下Vue实例的代码。


var app = new Vue({
  el:'#app',
  data:{
    list:[
      {text:'Item 1',visible:true},
      {text:'Item 2',visible:true},
      {text:'Item 3',visible:true}
    ]
  },
  methods:{
    toggleVisible:function(index){
      this.list[index].visible = !this.list[index].visible;
    }
  }
})

在Vue实例中,我们定义了一个列表list,包含三个数据项。toggleVisible方法用于切换每一个数据项的visible属性值,从而实现显示或隐藏。

以上就是使用Vue循环渲染并控制每个数据项显示或隐藏的实现方法。在实际开发中,这种方法经常被用到,特别是在列表渲染和表格渲染中。