Vue学习（六）-v-if的使⽤v-if 的使⽤
v-if
满⾜⼀定条件渲染数据
使⽤
<div id="app">
<section v-if="isShow"><!-- isShow 为 true 时，显⽰下⾯的div -->
<div>我是div，isShow为True时我显⽰</div>
</section>
<section v-else><!-- isShow 为 false 时，显⽰下⾯的div -->
<div>我是div，isShow为False时我显⽰</div>
</section>
</div>
var app = new Vue({
el: '#app',
data: {
counter: 0,
isShow: true
},
})
v-else-if
<section>
<p v-if='score >= 90'>优秀</p>
<p v-if='score >= 80'>良好</p>
<p v-if='score >= 60'>及格</p>
<p v-else>不及格</p>
</section>
var app =new Vue({
el:'#app',
data:{
score:60
},
})
// 逻辑⽐较复杂的使⽤计算属性，更推荐使⽤这样的写法
<p>{{result}}</p>
computed:{
result(){
if(this.score >=90){
return'优秀'
}else if(90>this.score >=80){
return'及格'
}else{
return'不及格'
}
}
}
案例3：切换账号格式
<div id="app">
input标签placeholder属性<section>
<span v-if='isShow'>
<label for="username">⽤户账户</label>
<input type="text"placeholder="请输⼊账号"id="username">
<button @click='toggle'>切换邮箱</button>
</span>
<span v-else>
<label for="email">⽤户邮箱</label>
<input type="text"placeholder="请输⼊邮箱"id="email">
<button @click='toggle'>切换账号</button>
</span>
</section>
</div>
虚拟DOM复⽤问题
问题：
1. 明明实在邮箱界⾯切换，结果⾥⾯的值被另外⼀个input框复⽤了
2. 虽然有时候我们需要这样的功能 ，但是⼤部分情况下还是去掉的。
原因：
1. 在Vue⾥⾯，刚拿到DOM的时候是不会直接渲染到页⾯的上的，⽽是先创建⼀个虚拟DOM，如果要渲染已经有的元素，虚拟DOM会
尽量复⽤这个元素
2. ⽐如我们写了两个input标签，其实虚拟DOM⾥⾯就储存了⼀个input标签的模板，每当页⾯上需要⼀个input标签，就会⽤把这个模
板渲染到页⾯上，实际上两个input就是同⼀个东西，就是⼀些属性不同，所以⾥⾯的值会被保留
解决⽅案：
<!-- 如果不希望Vue出现类似的复⽤的情况，可以给对应的input添加key值，key不同代表不能相互复⽤ -->
<input type="text"placeholder="请输⼊邮箱"id="email"key="123">
<input type="text"placeholder="请输⼊邮箱"id="email"key="12">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。