条件渲染
根据不同的条件进行相应的操作
v-show
当v-show=“false”该结构不在页面上显示
使用v-show做条件渲染 <h2 v-show="false">欢迎来到{{name}}</h2> <h2 v-show="false">欢迎来到{{name}}</h2>
v-if
v-if可以搭配false和true或者表达式
v-if成立时该结构直接消失,在界面上被移除
同时v-if可以搭配v-else-if和v-else使用
使用v-if做条件渲染 <h2 v-if="false">欢迎来到{{name}}</h2> <div v-if="n===1">gugu</div> <div v-else-if="n===2">mengmeng</div> <div v-else="n===3">nuonuo</div>
template
为了避免不必要的结构出现又保证代码简洁
使用template和v-if,不会影响代码的结构
<template v-if="n === 1"> <!-- template只能和v-if配合使用 --> <h2>hello</h2> <h2>gugu</h2> <h2>henan</h2> </template>
总结
<!-- 条件渲染: 1.v-if v-if,v-else-if,v-else 适用于:切换频率较低的场景 特点,不展示的dom元素直接移除 注意:v-if可以和v-else-if,v-else一起使用,但是结构不能被打断 2.v-show v-show=“表达式” 适用于:切换频率较高的场景 特点:不展示的dom元素未被移除,仅仅是样式隐藏掉 3.备注:使用v-if时,元素可能无法获取到,使用v-show一定能获取到 -->
over
标签:false,name,show,渲染,day62,条件,gugu From: https://www.cnblogs.com/GUGUZIZI/p/17057507.html