Vue学习笔记[06]-条件和循环

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的性能问题