条件渲染
条件渲染指令用来按需控制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
网络异常，图片无法展示
|
