列表渲染指令和条件渲染指令

一、列表渲染指令

在开发购物应用时，为了方便用户查找商品信息，通常会以商品列表形式展示商品信息。
在商品列表中，每件商品结构相同，如果每件商品结构都要手动定义，会非常麻烦。
为此，Vue提供了列表渲染指令 v-for，只需要在模版中定义一件商品结构，v-for就可以根据提供的数据自动渲染商品列表中所有商品。
使用v-for可以辅助开发者基于一个数组，对象，数字，或字符串来循环渲染一个列表，下面进行分解。

1.使用v-for根据数组渲染列表

<标签名 v-for="(item,index) in arr "><标签名>

 2.使用v-for根据对象渲染列表

<标签名 v-for="(item,name,index) in obj "><标签名>

 3.使用v-for根据数字渲染列表

<标签名 v-for="(item,index) in num "><标签名>

 4.使用v-for根据字符串渲染列表

<标签名 v-for="(item,index) in str "><标签名>

 二、条件渲染指令

在Vue中，当需要根据不同判断结果显示不同DOM元素，可以通过条件渲染指令来实现。
条件渲染指令可以辅助开发者需要DOM元素显示与隐藏。条件渲染指令有 v-if 和 v-show两种

1.v-if

根据布尔值切换元素显示或隐藏状态，本质通过操作DOM元素来切换显示状态。

 <h1 v-if="x">我是一段文本1111</h1>
 <h1 v-if="y">我是一段文本2222</h1>
 <h1 v-if="arr.length>0">9999999</h1>
 <h1 v-if="z>90">00000000</h1>

2.v-show

 v-if 和v-show 都用来决定每一个元素是否在页面上显示出来。
v-show的原理是通过为元素添加或移除display：none样式来实现元素的显示与隐藏。
需要频繁切换某个元素显示或隐藏状态时，使用v-show更节省性能开销，只需切换一次显示或隐藏状态时，v-if更合理。

 <h1 v-show="d">33333</h1>
 <h1 v-show="e">44444</h1>
 <h1 v-show="arr.length>0">555555</h1>

 1.v-if和v-show区别

  1.相同的：都可以进行显示隐藏
  2.不同点：v-if存在或不存在，v-show展示或不展示
  3.优缺点：少次的显示隐藏推荐使用v-if，减少内存的消耗。
  			多次的显示隐藏推荐使用v-show

 2.v-if和v-for优先级和使用事项

1. 在vue2中v-for比v-if优先级高
2. 在vue3中v-if比v-for优先级高
3. v-if和v-for在vue2或vue3中都不要同时使用，如果需要使用在外层先使用判断，在进行循环