Vue框架入门（二）

---

一、v-if 和 v-show

v-if根据条件是否满足，选择渲染dom数据

<div id="app">
<div>{{msg}}</div>
<div v-if="score >90">优秀</div>
<div v-else-if="score<30 && score >=20">良好</div>
<div v-else>比较差</div>
</div>

v-show

<div v-show="flag">{{msg}}</div>
data{
// false就是执行的display:none
// true就是执行的display:block
flag: true,
}

v-if和v-show的区别：
v-if控制元素是否渲染到页面中
v-show控制元素是否显示到页面中（元素已经被渲染到页面中）

二、v-for循环结构

1.基于数组渲染列表

v-for是基于一个数组来渲染一个列表，v-for需要使用item in items的形式的特殊语法

item ：数组中的元素
items:循环的数组名 

<li v-for="item in arr">{{item}}</li>
data: {
  arr: ['apple', 'banana', 'orange']
}

使用v-for的时候，在数组的别名后面可以有第二个参数，代表的是元素的索引

2.索引

使用v-for的时候，在数组的别名后面可以有第二个参数，代表的是元素的索引

 <li v-for="(item,index) in arr">{{item + '-----' + index}}</li>

3.循环json格式的数组

<li v-for="(item,index) in myArr">{{item.cname}}</li>

4.循环遍历对象

<!-- 循环对象 -->
<!--  
 index:角标
key: 键名
value: 值 
-->
<div v-for="(value,key,index) in objects">
  {{index}} --- {{key}} -- {{value}}
</div>

使用v-for的注意事项：

key:

• key给每个节点做一个唯一的标识
• 主要作用是为了高效的更新虚拟的DOM
• 如果数组或者对象没有id，可以使用item.index,也就是使用元素的索引作为唯一的标识

<li @key="item.id" v-for="(item,index) in myArr">{{item.cname}}</li>
<li @key="item.index" v-for="(item,index) in myArr">{{item.cname}}</li>