VueJSを学ぶ(2)

2021-11-23

vue, vue2.0

動的なクラスの定義

class = "{ class名: true | false }" でクラスの有効無効を切り替えることができる
なので { active: isActive } みたいなdataオブジェクト作ってゴニョゴニョすればいい
クラス名突っ込んだ配列渡すでもいいらしい。[small-button active]みたいな

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div id="app">
    <h1 :class="classObject">Hello</h1>
    <button @click="changeColor()">change</button>
    <h1 :class="colors">Bye</h1>
    <button @click="addColor()">add</button>
    <button @click="putColor()">put</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    colors: []
  },
  computed: {
    classObject: function() {
      return {
        red: this.isActive,
        'bg-color': !this.isActive
      }
    },
  },
  methods: {
    changeColor: function() {
      this.isActive = !this.isActive
    },
    addColor: function() {
      if (this.colors.length === 0) {
        this.colors.push('red')
      } else if (this.colors.length > 0) {
        this.colors.push('bg-color')
      }
    },
    putColor: function() {
      this.colors.shift()
    }
  }
})
</script>
<style>
  .red {
    color: red;
  }
  .bg-color {
    background-color: #888888;
  }
</style>

v-if 条件付きレンダリング

v-if で指定した条件がtrueを返すときにだけレンダリングする
条件を否定された場合のレンダリングは v-else-ifv-else が使える
ただしv-ifの直下に書かないとダメ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
  <p v-if="ok">OK</p>
  <p v-else-if="maybeOk">maybe OK</p>
  <p v-else>NO!</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    ok: false,
    maybeOk: true
  }
})
</script>

v-show

使い方は v-if と一緒。

  • 違い
    v-if == false のときは何もレンダリングしない
    v-show == false のときはdisplay: noneにしてるだけ
    templateタグでは使えない(templateはhtmlに表示されないから

  • 使いドコロ
    v-ifは切替の際のレンダリングコストが高い。
    表示・非表示を頻繁に切り替える場合はまずv-showを検討したほうがいい

v-for 繰り返しレンダリング

配列、オブジェクト、整数を取って連続した処理をしたいときに使う

v-for="item in items" でitemsの数だけ繰り返せる
v-for="item, index in items" で第2引数からインデックスが取れる
itemsがオブジェクト型の場合は第2引数がkey、第3引数がインデックスになる
v-for="value, key, index in object
v-for="i in 10" で連続した整数を取ることもできる

ちなみに inof にしてもいいらしい

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div id="app">
  <ul>
    <template v-for="obj, index in objects">
      <li>
        <p>({{index}}){{obj.foo}}</p>
        <p>({{index}}){{obj.bar}}</p>
      </li>
    </template>
  </ul>
  <ul>
    <div v-for="obj, index in objects" :key="obj.id">
      <li>
        <p>({{index}}){{obj.foo}}</p>
        <input type="text">
      </li>
    </div>
  </ul>
  <button @click="remove">戦闘を削除</button>
  <button @click="addObj">追加</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    objects: [
      {foo: "foo1", bar: "bar1"},
      {foo: "foo2", bar: "bar2"},
    ]
  },
  methods: {
    addObj: function() {
      this.objects.push(
        { foo: "foo" + (this.objects.length + 1).toString(),
          bar: "bar" + (this.objects.length + 1).toString() }
      )
    },
    remove: function() {
      this.objects.shift()
    }
  }
})
</script>

  • v-forではkeyを指定するようにする
    templateでkeyは指定できないのでdivとか使おう

コメント

投稿する

投稿したコメントはご自身で削除できません

不適切なコメントと判断した場合は管理側で削除することがあります