Vue 3基础入门 课件 第3章 Vue3基本指令.pptxVIP

Vue3基本指令

3.1条件渲染指令:v-if与v-elsev-if指令组使用要点V-if:根据表达式真假决定是否渲染元素v-else-if:添加额外条件分支,须紧接v-ifv-else-if:添加额外条件分支,须紧接v-ifv-else:最终默认分支,不需要表达式条件变化时完全销毁或重建DOM指令必须连续使用在相邻元素上支持template标签包裹多个元素适合条件不频繁变化的场景条件为false时不生成任何DOM节点

3.1.3v-show与v-if的区别V-showv-if通过CSS的display属性控制显示隐藏根据条件真假决定是否创建DOM元素无论条件真假都会创建DOM元素条件变化时涉及销毁和重建VS仅切换CSS样式,性能更高初始渲染成本较高初始渲染更高效频繁切换用v-show,条件不变用v-if

3.2列表渲染指令v-for:基本用法基本语法v-for=iteminitemsitems为数据源数组,item为当前元素别名支持可选索引参数:(item,index)initems对象遍历支持(value,key,index)三参数形式可遍历对象的所有可枚举属性key属性始终为v-for设置唯一的key属性使Vue高效跟踪节点身份避免使用index作为keyv-for还可遍历整数范围,如nin10

3.2.2数组更新变更方法(修改原数组)非变更方法(返回新