Vue系列(七)之常用指令邏輯指令

今天主要介紹的是一些幫助我們實現判斷、循環等邏輯的指令，暫且叫他們爲邏輯指令吧。

v-show

切換元素的display屬性

<div v-show="show" class="box"></div>

data: {
  show: true
},

檢查元素：

將data中的show改爲false：

data: {
  	show: false
},

v-if家族

根據條件重建或者銷燬元素。與JS和Java等語言中if-else，if-elseif-else的使用是類似的

<div v-if="false">不會被渲染</div>

//二者只會渲染其中一個
<div v-if="collected">已收藏</div>
<div v-else>未收藏</div>

v-for

循環渲染某元素或某組件。 通常用於列表渲染。

<div v-for="item in list">{{item}}</div>

data:{
	list:['a','b','c','d']
}

也可以獲取到數組的下標：

//index是數組list的下標，從0開始
<div v-for="(item,index) in list">{{item+'==='+index}}</div>

一般使用v-for時會指定key屬性，爲什麼要加key

<div v-for="(item,index) in list" :key="index">{{item.name+'==='+index}}</div>