「这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战」。

条件渲染

条件渲染指令用来按需控制DOM的显示与隐藏

v-if

v-show

<div id="app">
  <p v-if="flag">这是v-if控制的元素</p>
  <p v-show="flag">这是v-show控制的元素</p>
  <!-- flag为true时元素显示，为false则隐藏 -->
</div>
<script src=""></script>

const vm = new Vue({
	el: '#app',
  data: {
  	flag = true
  },
  methods: {

  }         
})

v-if和v-show的区别

通过观察元素的隐藏和显示，两者的区别在于：v-if是动态的删除和创建元素来控制元素的显示隐藏；而 ****来控制元素的显示与隐藏

性能比较：

- 当需要频繁地切换元素的显示状态时，使用v-show性能更好
- 当刚打开页面时，某些元素默认是不需要被展示的，且这个元素后期也可能不需要被展示，此时用v-if性能更好(flag初始值为false，使用v-if页面不会创建不需要展示的元素)

实际开发中直接使用v-if多一些(不考虑性能问题)

v-if配套指令v-else-if

<div v-if="type === 'A'">优</div>
<div v-else-if="type === 'B'">良</div>
<div v-else-if="type === 'C'">中</div>
<div v-else>差</div>

注意：

v-else-if指令必须配合v-if指令使用，否则不会被识别

当其中一个分支为true，则执行这个分支的内部代码，并且其余的分支判断都会跳过不执行

当所有的条件都不满足时，就显示v-else指令的元素

在使用v-else-if指令的时候是连续的，中间不能被打断

列表渲染指令v-for

v-for列表渲染指令，用于辅助开发者 基于一个数组来循环渲染一个列表结构 。v-for指令需要使用item in items形式的特殊语法，其中：

item是被循环的每一项(变量名，可任意命名)
items是待循环的数组

要循环生成什么样的DOM结构，就在这个DOM结构上添加v-for指令 。语法： v-for="item in items"

v-for指令还有一个可选的第二个参数，即当前项的索引。语法格式为：v-for="(item, index) in items" （item项和index项都是形参，可根据需要重命名）

<div id="app">
  <table class="table table-bordered table-hover table-striped">    
    <thead>
      <th>索引</th>
      <th>ID</th>
      <th>姓名</th>
    </thead>
    <tbody>
      <!-- 要循环生成什么样的DOM结构/组件，就在这个DOM结构/组件标签上添加v-for指令 -->
      <!--循环生成表格的每一行-->
      <tr v-for="(item, index) in list" :key="item.id" :title="item.name + index">     <!-- 动态绑定一个title属性，是为了证明在父元素中能使用item -->
        <td>{{ index }}</td>                <!-- 子元素能访问到父元素中的item和index -->
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      <!-- 内容渲染时使用的数据来源：1、data 2、计算属性computed 3、当前元素及其父元素中的形参 -->
      </tr>
    </tbody>
  </table>
</div>

const vm = new Vue({
   el: '#app',
   data: {
     list: [
       {id: 1, name: '张三'},
       {id: 2, name: '李四'},
       {id: 3, name: '王五'}
     ]
   },
   methods: {

   }         
})

v-for基于对象来循环渲染一个列表结构

<template>
	<div>
    <h3>汽车信息</h3>
    <ul>
      <li v-for="(value, key) in car" :key="key">
  			{{key}}---{{value}}
  		</li>
  	</ul>
  </div>
</template>

<script>
	export default {
  	const vm = new Vue({
  		el: '#root',
    	data: {
  			car: {
  				name: '奥迪A8',
    			price: '70万',
    			color: '黑色'
  			}
  		}
  	})
  }
</script>

页面渲染结果：

官方建议，在使用v-for指令时，一定要动态绑定一个key属性，且尽量将id作为key的值(注意：key的值不能有重复，否则报错)。此外，官方对于key的值类型的要求只能是字符串或者数字类型

key的作用：给节点做一个标识，相当于身份证的作用

难点：为啥不能使用索引值index作为key？

因为索引值和对应的项之间没有强制绑定关系（即当往数组里第一位插入元素(unshift( )方法)时，对应项的索引值就会改变）具体原理如下：

新旧虚拟DOM对比，若某一个元素的内容及属性完全一致，则不用通过新的虚拟DOM转化为真实DOM，而是直接复用旧虚拟DOM转化过的真是DOM

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖

🤟🏼 冇事来学系--Vue2.0条件渲染和列表渲染指令