【vue学习】—条件判断、循环遍历

1. 条件判断

1.1 v-if/v-else-if/v-else

上面这三个指令与js中的条件语句if、else 、else if 用法类似

Vue的条件指令可以根据表达式的值在DOM中渲染或者销毁元素或者组件

简单的案例演示：

 <div id="app">
    <h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=60">合格</h2>
    <h2 v-else>不及格</h2>
 </div>
 <script src="../js/vue.js"></script>

 <script>
     const app = new Vue({
         el:'#app',
         data:{
            score:60
         },
         methods:{

         }
     })
 </script>

v-if原理：v-if后面的条件为false时，对应的元素及其子元素都不会被渲染，也就是根本不会有对应的标签出现

1.2 条件渲染案例

用户在登录时，可以切换用邮箱登录还是用户账号登录

如下图所示：

<div id="app">
     <h2>这里给两个input输入框加上key属性</h2>
     <h2>理由：Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素</h2>
     <h2>案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了</h2>
     <h2>如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key,并且需要保证key的不同</h2>
     <span v-if="type==='username'">
         <label>用户账号:</label>
         <input type="text" placeholder="用户账号" key="username-input">
     </span>
     <span v-else>
         <label>邮箱地址:</label>
         <input type="text" placeholder="邮箱地址" key="mail-input">
     </span>
     <button @click="typeChange">点击切换</button>
 </div>
 <script src="../js/vue.js"></script>

 <script>
     const app = new Vue({
         el:'#app',
         data:{
            type:'username'
         },
         methods:{
             typeChange() {
                 this.type = this.type=='username'?'mail':'username'
             }
         }
     })
 </script>

1.3 v-show

v-show和v-if功能类似，也是决定一个元素是否渲染，但是原理上不同，看下面一个案例：

<div id="app">
    <button @click="changeShow">切换</button>
     <span v-show="isShow">要不要展示呢</span>
 </div>
 <script src="../js/vue.js"></script>

 <script>
     const app = new Vue({
         el:'#app',
         data:{
            isShow:true
         },
         methods:{
             changeShow() {
                 this.isShow = !this.isShow;
             }
         }
     })
 </script>

从上图中我们可以看出，当点击切换，v-show条件为false时，仅仅是将元素的display属性设置为none而已。

那么在平时开发中，我们如何选择v-show和v-if呢？

• 当需要在显示和隐藏中来回频繁切换时，用v-show
• 当只有一次切换时，通常用v-if

2. 循环遍历

2.1 v-for 遍历数组

当我们有一组数据需要渲染时，就用v-for来完成。

v-for的语法类型与js中的for循环

格式：item in items

需要注意的是：在遍历的过程中，既可以使用数组的索引，也可以不使用，代码如下：

<div id="app">
    <h2>不用索引</h2>
     <ul>
         <li v-for="book in books">{{book}}</li>
     </ul>

     <h2>使用索引</h2>
     <ul>
         <li v-for="(book,index) in books">{{index+1}}-{{book}}</li>
     </ul>
 </div>
 <script src="../js/vue.js"></script>

 <script>
     const app = new Vue({
         el:'#app',
         data:{
            books:['java编程思想','java核心技术','并发编程实战','数学之美']
         },
         methods:{

         }
     })
 </script>

效果如下：

在遍历过程中，如果我们需要拿到数组的索引，语法格式为：v-for=(item, index) in items

其中，index就是取出的item在数组中对应的索引值

2.2 v-for 遍历对象

v-for也可以用来遍历对象：

<div id="app">
    
     <h2>遍历对象</h2>
     <ul>
         <li v-for="(val,key,index) in user">
             {{val}}--{{key}}--{{index}}
         </li>
     </ul>
 </div>
 <script src="../js/vue.js"></script>

 <script>
     const app = new Vue({
         el:'#app',
         data:{
             user:{name:'van.shu',age:18,height:1.77}
         },
         methods:{

         }
     })
 </script>

显示如下：

可以看出 v-for遍历对象，结构：v-for="(val,key,index) in obj

其中，第一个值val代表对象属性的值，第二个key代表对象的属性名称，第三个代表索引

2.3 组件的key属性

官方在推荐我们使用v-for的时候，给对应的元素和组件加上 :key 属性。

这是为什么呢？

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点。

例如：希望可以在B和C之间加一个F

• 如果没有 :key 的话，Vue底层默认会把C更新成F，D更新成C，E更新成D，最后再插入E

• 但是如果加上 :key属性的话,Vue底层就会直接把F插入到B和C之间

如下图所示：

所以，key的作用主要是为了高效的更新虚拟DOM

2.4 检测数组更新

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新

<div id="app">
    <h2>哪些数组的方法是响应式的</h2>
     <ul>
         <li v-for="num in nums">{{num}}</li>
     </ul>
     
     <button @click="btnClick">点击</button>
 </div>
 <script src="../js/vue.js"></script>

 <script>
     const app = new Vue({
         el:'#app',
         data:{
             nums:[1,2,3,4,5,1]
         },
         methods:{
             btnClick() {
                 //push方法：在数组最后位置可以动态添加多个元素
                 this.nums.push(6,7,8)

                 //pop方法：删除数组最后一个元素
                 this.nums.pop()
                 
                 //unshift方法：在数组的最前面位置动态添加多个元素
                 this.nums.unshift(4, 4, 4)

                 //shift方法：弹出数组中第一个元素
                 this.nums.shift()

                 //splice方法：可以传入多个参数
                 //作用：删除元素、插入元素、替换元素
                 //第一个参数：从第几个元素开始
                 //第二个参数：如果用于删除元素，则第二个参数传入的是你要删除几个元素，如果不填，默认删除后面所有的元素
                 //第二个参数：如果用于插入元素，则第二个参数传入0,后面继续填上你要添加的元素(可以是多个元素)
                 //第二个参数：如果用于替换元素，则第二个参数传入的是你要替换几个元素，后面填上的是你要替换后的元素
                 this.nums.splice(1, 3, 99, 100)

                 //sort方法：排序
                 this.nums.sort((a,b)=>b-a)
                 
                 //reverse方法：反转
                 this.nums.reverse();
                 
                 //这个方法也是响应式的
                 Vue.set(this.nums,0,999)
                 
                 //注意：通过索引修改数组中的元素，不是响应式的
                 this.nums[0]=777
             }
         }
     })
 </script>