文章目录

条件判断
循环遍历
回顾

条件判断

v-if、v-else-if、v-else
- 这三个指令与JavaScript的条件语句if、else、else if类似。
- Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。
简单的案例演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-v-if、v-else-if、v-else的使用</title>
</head>
<body>
  <div id="app">
    <h2 v-if="score>=85">优秀</h2>
    <h2 v-else-if="score>=75">良好</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: 99,
      }
    })
  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4UBTkllc-1609594802300)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记五/1.gif)]

v-if的原理：
- v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
- 也就是根本不会有对应的标签出现在DOM中。
一般v-else-if使用的较少，因为如果需要逻辑判断比较复杂，这种写法不是很好，一般可以通过计算属性完成。

条件渲染案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04-条件渲染案例</title>
</head>
<body>
  <div id="app">
    <span v-if="isUser">
      <label for="userName">用户账号</label>
      <input type="text" id="userName" placeholder="用户账号">
    </span>
    <span v-else>
      <label for="email">用户邮箱</label>
      <input type="text" id="email" placeholder="用户邮箱">
    </span>
    <button @click="isUser = !isUser">切换登录方式</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
    
      el: '#app',
      data: {
    
    
        isUser: true
      }
    })
  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xkufe0S0-1609594802303)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记五/2.gif)]

案例小问题

小问题：
- 如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前输入的内容。
- 但是按道理讲，我们应该切换到另一个input元素中了。
- 在另一个input元素中，我们并没有输入内容。
- 为什么会出现这个问题呢？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-87ML9jPa-1609594802304)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记五/3.gif)]

问题解答：
- 这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建元素。
- 在上面的案例中，Vue内部会发现原来的input不再使用，直接作为else中的input来使用了。
解决方案：
- 如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key。
- 并且我们需要保证key的不同。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AAw5JvzI-1609594802307)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记五/4.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DaW1g5Pl-1609594802308)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记五/5.gif)]

v-show与v-if的区别

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染。
v-if和v-show对比
v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
- v-if当条件为false时，压根不会有对应的元素在DOM中。
- v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
开发中如何选择呢？
- 当需要在隐藏与显示之间频繁切换时，使用v-show。
- 当只有一次切换时，通过使用v-if。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-v-show的使用</title>
</head>
<body>
  <div id="app">
    <h2 v-if="isShow" id="if">{
    
    {
    
    message}}</h2>
    <h2 v-show='isShow' id="show">{
    
    {
    
    message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
    
      el: '#app',
      data: {
    
    
        message: "我是阿牛",
        isShow: true
      }
    })
  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O4fjueZI-1609594802309)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记五/6.gif)]

循环遍历

v-for遍历数组

当我们有一组数据需要渲染时，我们就可以使用v-for来完成。
- v-for的语法类似于JavaScript中的for循环。
- 格式：item in itmes。
我们来看一个简单的案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-v-for遍历数组</title>
</head>
<body>
  <div id="app">
    <!-- 不需要索引值 -->
    <ul>
      <li v-for="item in names">{
    
    {
    
    item}}</li>
    </ul>

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

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
    
      el: '#app',
      data: {
    
    
        names: ['阿牛', 'kobe', 'james', '小华']
      }
    })
  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k6NX0u0p-1609594802310)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记五/7.jpg)]

如果在遍历的过程中不需要使用索引值
- v-for="movie in movies"
- 依次从movies中取出movie，并且在元素的内容中，我们可以通过Mustache语法，来使用movie。
如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？
- 语法格式：v-for=(item, index) in items
- 其中的index就代表了取出的item在原数组的索引值。

v-for遍历对象

v-for可以用户遍历对象：
- 比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02-v-for遍历对象</title>
</head>
<body>
  <div id="app">
    <!-- 在遍历对象的过程中，如果只是获取一个值，那么获取到的是value -->
    <ul>
      <li v-for="item in info">{
    
    {
    
    item}}</li>
    </ul>
    <!-- 要获取key和value 格式:(value, key) -->
    <ul>
      <li v-for="(item, key) in info">{
    
    {
    
    item}}-->{
    
    {
    
    key}}</li>
    </ul>
    <!-- 要获取key、value和index 格式:(value, key, index)-->
    <ul>
      <li v-for="(item, key, index) in info">{
    
    {
    
    item}}-->{
    
    {
    
    key}}-->{
    
    {
    
    index}}</li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
    
      el: '#app',
      data: {
    
    
        info: {
    
    
          name: 'lz',
          age: 18,
          height: 180
        }
      }
    })
  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-plMVrDXo-1609594802317)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记五/8.jpg)]

组件的key属性

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

回顾

Vue笔记一——Vue安装与体验
 Vue笔记二——Vue声明周期与模板语法
 Vue笔记三——计算属性(computed)
Vue笔记四——事件监听的使用

Vue笔记五——条件判断与循环遍历