タイトル通りvue.js学んでいきます。今回はif文やらなんやらを学んでいきます。前回は→vue.jsを学ぶ①
if文
この時のelse,else-ifの位置はifの直下
<p v-if="ok">OK!</p>
<p v-else-if="maybeOk">maybeOK!</p>
<p v-else>Not OK....</p>data: {
ok:false,
myabeOk:true
}if文②templateとかで囲む
(テンプレートタグで囲むと、ブラウザ上などで見えない)
<template v-if="ok">
<p>ははは</p>
<p>ははひ</p>
<p>ははふ</p>
</template>
<button @click="ok = !ok">ボタン</button>data: {
ok:false,
maybeOk:true
}if③v-show
v-showは全て読み込んで見えなくするだけ、v-ifは描画削除を繰り返す
templateタグでv-showは使えない！
<button @click="ok = !ok">ボタン</button>
<p v-show="ok">Show</p>v-for①
<v-for=”(それぞれの名前 in 配列名orオブジェクト名)”> {{ それぞれの名前 }}</>
<ul> //配列の時は第二引数にインデックスを取ってくる
<li v-for="(value,index) in fruits">({{index}}){{value}}</li>
</ul>
<ul> //オブジェクトの時は第二引数にキー、第三引数にインデックスを取ってくる
<li v-for="(value , key,index) in object">({{index}}){{key}}-{{value}}</li>
</ul>data: {
fruits:['りんご','ばなな','ブドウ'], //配列
object:{ //オブジェクト
firstName:'太郎',
lastName:'田中',
age:21
}
},
実行結果
上：（0）りんご、（1）ばなな、（2）ブドウ
下:(0)firstName-太郎
v-for②
セットで繰り返したい
<ul>
<template v-for="fruit in fruits"> //hrも含めてループできる
<li>{{fruit}}</li>
<hr>
</template>
</ul>v-for③
整数も取ってこれるし、なんなら of で書いてもいいよ
<ul>
<li v-for="n of 10">{{n}}</li>
</ul>v-for④（ちゃんとkey属性をつけよう）
v-for使う時の注意点
key属性をつけない場合、ループされる{{}}の要素と、ループ中の他の要素と紐付けがされない。
今回の例だと、inputの中身が繰り上がってしまう。なので、div自体にkey属性をつけて紐付けをしておく。
また、key属性はtemplateタグだと消えてしまうので、divを使う。
また、キーの中身がかぶる時はID や、タイトルなど、オブジェクトなど使いながら
ユニークな名前をつけてあげると良いよ。
<div v-for="fruit in fruits" :key="fruit">
<p>{{ fruit }}</p>
<input type="text">
</div>
</ul>
<button @click="remove">先頭を削除</button>
</div>methods:{
remove:function(){
this.fruits.shift()
}
}