v-if和v-else-if
<div v-if="true">text</div>
当v-if后的条件为false是,对应的node不会被渲染,在dom树中无法找到该节点.
v-else-if也很简单:
<div v-if="num>10">text1</div>
<div v-else-if="num<5">text2</div>
//num = 3 => text2
v-if的复用问题
由于vue会将渲染前的节点抽象到虚拟DOM并放入内存中,从而会尽最大可能
减少已有的节点进行重复渲染,所以会高度的复用已经渲染好的组件,由于v-if和v-else控制的元素都是互斥的,如果元素的类型相同,vue会复用之前的元素,不会另外新建一个元素再加入到dom中
<body>
<div id="app">
<label for="userID" v-if='isUserID'>用户ID: <input type="text" name="userID" id="userID"></label>
<label for="userEmail" v-else>用户邮箱: <input type="text" name="userEmail" id="userEmail"></label>
<button @click="changeLogin"> 切换 </button>
</div>
</body>
<script>
const vm = new Vue({
el:"#app",
data:{
isUserID:true
},
methods:{
changeLogin(){
this.isUserID = !this.isUserID;
}
}
})
</script>
input的id和name属性都变化了
若不希望复用,可以再
lable处添加key属性,若key的值不同,则不会复用:
<label for="userID" v-if='isUserID' key="userID">用户ID: <input type="text" name="userID" id="userID"></label>
<label for="userEmail" v-else key="userEmail">用户邮箱: <input type="text" name="userEmail" id="userEmail"></label>
input元素不再复用
v-show与v-if的区别
v-show只是单纯的将元素的display属性改成了none,节点仍然存在.关于性能方面,如果要频繁地切换是否显示,则使用v-show,因为修改css比修改dom的结构高效.当只有一次切换时或初次渲染是判定是否渲染元素时,使用v-if.
用 v-for 遍历
1. 遍历数组
1.不带索引:
<h2 v-for="game in games">{{game}}</h2>
data:{
games:["GTA5","Monster Hunter","Witcher III","NEKOPARA",]
}
2. 带索引:
<h2 v-for="(game,index) in games">{{index}} {{game}}</h2>
data:{
games:["GTA5","Monster Hunter","Witcher III","NEKOPARA",]
}
值得一提的是,利用数组索引改变数组的行为不是响应式的,因此
games[0] = "Minecraft"只会对原数组进行更新:
games:["Minecraft","Monster Hunter","Witcher III","NEKOPARA",]并不会对界面上已经渲染后的元素进行更新.但是其他方法例如push(),pop(),unshift(),shift(),sort(),reverse(),splice()是响应式的.
可以利用splice或vue的set方法对数组进行修改.
splice(开始位置,替换个数,替换为):
games.splice(0,1,"Minecraft"):从games[0]开始,替换1个元素为"Minecraft"
或使用Vue.set(要修改的对象,索引值,修改为):
Vue.set(this.games,1,"Minecraft")
2. 遍历对象
- 只取出value:
<h2 v-for="item in Person">{{item}}</h2>
data:{
Person:{
name:"kagura",
age:21,
height:180,
}
- 取出value和key:
<h2 v-for="(value,key) in Person">{{key}} : {{value}}</h2>
data:{
Person:{
name:"kagura",
age:21,
height:180,
}
TODO 3.v-for的性能问题
网友评论