Vue学习笔记（三）条件渲染和循环渲染

目录

• 一、条件渲染
  • 1. v-if
  • 2. 与v-else配合使用
  • 3. 与v-else-if配合使用
  • 4. v-show的使用
  • 5. 类型切换案例
• 二、列表渲染
  • 1. 遍历数组
  • 2. 遍历对象
    • 获取value
    • 同时获取key
    • 同时获取index
  • 3. 循环渲染中key的使用
  • 4. 哪些数组方法是响应式的
  • 5. CoderWhy老师留下作业的完成

一、条件渲染

条件判断渲染相关的指令：

• v-if
• v-else
• v-elif
• v-show

1. v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

例如：

<h2 v-if="isShow">
  <div>abc</div>
  <div>abc</div>
  <div>abc</div>
  <div>abc</div>
  Hello world!
</h2>

当 isShow 为 true 时：

而为 false 时：

2. 与v-else配合使用

<div id="app">
  <h2 v-if="isShow">
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    Hello world!
  </h2>
  <h2 v-else>
    如果isShow==false，显示我
  </h2>
</div>

当isShow为false时：

3. 与v-else-if配合使用

<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>
  分数：<input type="text" v-model="score">
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      score: 99
    }
  });
</script>

运行结果：

4. v-show的使用

用法和 v-if 基本一致：

<!-- v-if: 当条件为false时，包含v-if指令的元素根本不存在（一次）-->
<h2 v-if="isShow" id="aaa">{{message}}</h2>

<!-- 而v-show只是添加了行内样式而已（频繁变化时）-->
<h2 v-show="isShow" id="bbb">{{message}}</h2>

官网给出来的两者的区别：

5. 类型切换案例

<span v-if="isUser">
  <label for="username">用户账号</label>
  <input type="text" placeholder="用户账号" id="username" key="username">
</span>
<span v-else>
  <label for="email">用户邮箱</label>
  <input type="text" placeholder="用户邮箱" id="email" key="email">
</span>
<button @click="change_login_type">切换类型</button>

var app = new Vue({
  el: '#app',
  data: {
    isUser: true
  },
  methods: {
    change_login_type() {
      this.isUser = !this.isUser;
    }
  }
});

二、列表渲染

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

1. 遍历数组

准备数据：

var app = new Vue({
  el: '#app',
  data: {
    names: ['mike', 'jack', 'sara']
  },
  methods: {}
});

遍历渲染：

<!-- 没有使用下标值 -->
<ul>
  <li v-for="item in names">{{item}}</li>
</ul>

当需要使用下标值时使用：(item, index) in items形式的语法：

<!-- 获取索引值 -->
<ul>
  <li v-for="(item, index) in names">
    {{index+1}} -- {{item}}
  </li>
</ul>

运行结果：

此外也可以使用 item of items 的语法。

2. 遍历对象

语法：

遍历对象的所有值：v-for="value in myObject"

此外也可以通过：v-for="(value, name) in myObject" 来获取键信息

示例：

准备数据

var app = new Vue({
  el: '#app',
  data: {
    info: {
      name: "why",
      age: 18,
      height: 1.88
    }
  },
  methods: {}
});

获取value

<ul>
  <!-- 1.value -->
  <li v-for="item in info">
    {{item}}
  </li>
</ul>

同时获取key

<!-- 2.获取key-value -->
<ul>
  <li v-for="(key, value) in info">
    {{key}} -- {{value}}
  </li>
</ul>

同时获取index

<ul>
  <li v-for="(key, value, index) in info">
    {{index+1}}--{{key}}--{{value}}
  </li>
</ul>

运行结果：

3. 循环渲染中key的使用

以下解释摘自官网：https://v3.cn.vuejs.org/api/special-attributes.html#key

key 特殊 attribute 主要用做 Vue 的虚拟 DOM 算法的提示，以在比对新旧节点组时辨识 VNodes。如果不使用 key，Vue 会使用一种算法来最小化元素的移动并且尽可能尝试就地修改/复用相同类型元素。而使用 key 时，它会基于 key 的顺序变化重新排列元素，并且 key 不再存在的元素将始终被移除/销毁。

有相同父元素的子元素必须有唯一的 key。重复的 key 会造成渲染错误。

简单来说使用key可以提高程序的效率，但需要保证相同父元素的子元素必须有唯一的 key。

但是对于一般的数组来说是不能使用index作为 v-for 指令的 key 的，详细解析见：Vue2.0 v-for 中 :key 到底有什么用？ - 方应杭的回答 - 知乎 https://www.zhihu.com/question/61064119/answer/766607894

那如果不使用 index ，那使用什么东西作为 key 呢？这里知乎大神给出了答案：

没有 id 怎么办？

1. 创建一个 id() 函数，每次调用自增一
2. 使用 guid 库或者 uuid() 库
3. 最好使用数据库中的 id

具体示例如下：

var app = new Vue({
  el: '#app',
  data: {
    letters: ['a', 'b', 'c', 'd', 'e'],
    curId: 0
  },
  methods: {
    getId() {
      res = this.curId;
      this.curId++;
      return res;
    }
  }
});

<div id="app">
  <ul>
    <li v-for="item in letters" :key="getId()">{{item}} </li>
  </ul>
</div>

运行结果：

4. 哪些数组方法是响应式的

是响应式的方法：

1. push(Object obj)
2. pop()
3. shift() 删除第一个
4. unshift() 在数组前面添加元素，可以多个
5. splice() 移除指定下标范围的元素
6. sort() 排序元素
7. reverse() 反转元素
8. 使用Vue.set(this.xxx, 0, "aaa")来代替 this.xxx[0]="aaa"; 修改元素的值。

5. CoderWhy老师留下作业的完成

要求：展示出列表 ['海王', '海尔兄弟', '火影忍者', '进击的巨人'] 中的数据，当鼠标点击某个文本时，该文本变成红色，而其他文本为原来的黑色。（即选中高亮）

css部分：

.active {
  color: red;
}

js部分：

var app = new Vue({
  el: '#app',
  data: {
    movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],
    currentIndex: -1
  },
  methods: {
    onClick(li_index) {
      this.currentIndex = li_index;
    }
  }
});

html部分：

<ul>
  <!-- <li v-for="movie in movies">{{movie}}</li> -->
  <li v-for="(movie, index) in movies" :class="{active:index===currentIndex}" @click="onClick(index)">
    {{movie}}
  </li>
</ul>

实现效果：

点击第一个：

点击第三个：