javascript - Vue.JS 为元素使用类

Question

我尝试为某些类提供 v-if="seen"但它显然不起作用...

我的代码:

<div class="item" v-if="seen">item 1</div>
<div class="item" v-if="seen">item 2</div>
<div class="item" v-if="seen">item 3</div>

var item = new Vue({
   el: 'div.item',
   data: {
       seen: true
   }
});

在 JavaScript 中我可以这样做:

var item = document.getElementsByClassName('item');
for(var i = 0; i < item.length; i++){
    item[i].style.display = "none";
}

我必须在 Vue.js 中做什么？谢谢

Answer 1

您可以尝试使用 v-for 并将数据设置为使用数组。

尝试这样的事情:

<div id="app">
    <div v-for="myItem in items" class="item" v-if="myItem.seen">{{myItem.name}}</div>
</div>

var app = new Vue({
   el: '#app',
   data: {
       items : [{
           seen: true,
           name: 'item 1'
       },
       {
           seen: false,
           name: 'item 2'
       },
       {
           seen: false,
           name: 'item 3'
       }]
   }
});