关于javascript：Vuejs显示/隐藏条件


Vuejs show/hide condition

添加和删除动态项目起作用。我想另外显示/隐藏每个元素。但是，当我"显示/隐藏"时，它将全部切换。如何仅调用当前索引(切换方法？)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var app = new Vue({
    el: '#app',
    data: {
    inputProject: [],
    counter:0,
    active : false
    },
    methods: {
    addInput: function() {
            this.inputProject.push(this.counter);
            this.counter++
        },
    removeInput: function(index) {
            this.inputProject.splice(index,1);
        },
    toggle: function (index) {
      this.active = !this.active;
    }
    }
})

enter

1
 <p v-show="elem.active" v-bind:id="elem.id">show {{push}}</p>

工作小提琴。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var app = new Vue({
   el: '#app',
   data: {
     inputProject: [],
     counter:0
   },
   methods: {
      addInput: function() {
        this.inputProject.push({id:this.counter,active:false});
        console.log(this.inputProject);
        this.counter++
      },
      removeInput: function(index) {
        this.inputProject.splice(index,1);
      },
      toggle: function (index) {
        var item= this.inputProject.filter(a=>a.id==index)[0];
        item.active=!item.active;
      }
   }
})