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>