Vue.JS используя класс для элемента

Question

Vue.JS используя класс для элемента

1

Я пытаюсь дать 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? Спасибо

Delbo ar 09 авг. 2018, в 15:50

Источник

0

Вы используете v-if правильно. Вы не хотите настраивать отдельные экземпляры Vue для каждого элемента div.item; это должен быть один элемент, содержащий другие элементы div.
Daniel Beck 09 авг. 2018, в 13:50

Теги:

javascript

vue.js

vuejs2

4 ответа

2

Путь Vue разработан, он должен быть идеально выполнен следующим образом:

<div id="app">
    <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>
</div>

var app = new Vue({
   el: '#app',
   data: {
       seen: true
   }
});

Thomas Edwards 09 авг. 2018, в 11:07

0

Проблема в том, как я могу применить данные: истинно только для одного элемента и ложно для других?
Delbo ar 09 авг. 2018, в 13:57
0

проверьте мой ответ ... он должен делать именно то, что вам нужно.
jremi 09 авг. 2018, в 14:08
1

Тогда вам понадобятся разные переменные, управляющие каждой из них.
Daniel Beck 09 авг. 2018, в 14:08

Показать ещё 1 комментарий

0

Существует много способов добиться того, чего вы хотите. Пример одного из них:

<div is="app">
  <div class="item" v-if="!seen.includes('item1')">
    item 1
  </div>
  <div class="item" v-if="!seen.includes('item2')">
    item 2
  </div>
  <div class="item" v-if="!seen.includes('item3')">
    item 3
  </div>
</div>

var item = new Vue({
  el: '#app',
  data: {
    seen: [
      'item1',
      'item3'
    ]
  }
})

Vladislav Ladicky 09 авг. 2018, в 11:46

-1

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

или вы можете использовать v-show или v-class

Sam Pasku 09 авг. 2018, в 12:24

Ещё вопросы

Вы используете v-if правильно. Вы не хотите настраивать отдельные экземпляры Vue для каждого элемента div.item; это должен быть один элемент, содержащий другие элементы div.
Проблема в том, как я могу применить данные: истинно только для одного элемента и ложно для других?
проверьте мой ответ ... он должен делать именно то, что вам нужно.
Тогда вам понадобятся разные переменные, управляющие каждой из них.

jremi · Accepted Answer · 2018-08-09T12-06-00.000Z

Вы можете попробовать использовать 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'
       }]
   }
});

Нет проблем :) Веселого программирования