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 で指定した条件がtrueを返すときにだけレンダリングする
条件を否定された場合のレンダリングは v-else-if か v-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-if と一緒。
違い
v-if == false のときは何もレンダリングしない
v-show == false のときはdisplay: noneにしてるだけ
templateタグでは使えない（templateはhtmlに表示されないから
使いドコロ
v-ifは切替の際のレンダリングコストが高い。
表示・非表示を頻繁に切り替える場合はまずv-showを検討したほうがいい
配列、オブジェクト、整数を取って連続した処理をしたいときに使う
v-for="item in items" でitemsの数だけ繰り返せる
v-for="item, index in items" で第２引数からインデックスが取れる
itemsがオブジェクト型の場合は第２引数がkey、第３引数がインデックスになる
v-for="value, key, index in object
v-for="i in 10" で連続した整数を取ることもできる
ちなみに in を of にしてもいいらしい
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とか使おう
コメント