vue之条件与循环渲染（一）_vue for循环渲染对象的属性改变渲染-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52129860/article/details/129381943

本文介绍了Vue.js中的条件渲染指令v-if、v-else和v-show，以及循环渲染的v-for，展示了如何根据条件动态显示内容和处理数组及对象数据。v-if适用于条件不常变的情况，v-show适合频繁切换，v-for用于渲染列表数据，同时强调了Vue对对象属性响应式处理的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue之条件与循环渲染（一）

实验介绍
条件渲染
v-else
v-show
循环渲染
- 运行结果： ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/bc193fc91ef69018de072a2e639be2ed.png#pic_center)
v-for 将对象数据渲染成元素

实验介绍

前面提到 Vue.js 的作用是动态的构建用户界面，灵活的控制渲染是很有必要的，快速构建也是很有必要的，条件渲染和循环渲染，在视图构建中起着重要作用。

知识点

v-if 和 v-else
v-show
v-if 和 v-show 比较
v-for 将数组数据渲染成元素
v-for 将对象数据渲染成元素
key 属性
数组更新检测
对象更新的注意事项

条件渲染

v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回除了 false，0，“”，null，undefined 和 NaN 外的值的时候被渲染。

使用以下命令引入vue.js 文件。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-if="display">你好，实验楼</p>
      <p>SYL</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          display: true,
        },
      });
    </script>
  </body>
</html>

当 display:true 时，运行结果：

在这里插入图片描述
当 display:false 时，运行结果：

v-else

使用 v-else 指令来表示 v-if 的“else 块”，当 v-if 返回除了 false，0，“”，null，undefined 和 NaN 外的值的时候被渲染，否则，就渲染 v-else 块元素。

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-if="display">你好，实验楼</p>
      <p v-else>SYL</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          display: true,
        },
      });
    </script>
  </body>
</html>

运行结果：
在这里插入图片描述
注意：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。而 v-if 是从虚拟 DOM 的层面操作。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-show="show">你好，实验楼</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          show: true,
        },
      });
    </script>
  </body>
</html>

运行结果：
在这里插入图片描述
v-if 和 v-show 比较
一般来说，v-if 会牵涉到虚拟 DOM diff 算法，有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

循环渲染

循环渲染经常会使用到，在开发中经常会遇到 DOM 结构一样的块代码，那么我们就可以使用循环渲染来一步到位。

v-for 将数组数据渲染成元素
将菜单数组循环成一个完成的菜单：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      ul {
        width: 100%;
        height: 40px;
        list-style: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: yellowgreen;
      }
      ul li {
        width: 20%;
        height: 100%;
        color: white;
        line-height: 40px;
        text-align: center;
        text-transform: uppercase; /*大写转换*/
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul class="nav">
        <li v-for="navItem in nav">{{navItem}}</li>
      </ul>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          nav: ["home", "shop", "contact", "about", "name", "mroe", "histroy"],
        },
      });
    </script>
  </body>
</html>

运行结果：

v-for 将对象数据渲染成元素

在开发中我们获取到的数据经常是对象形式。

对象数据循环出数据：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-for="val in userInfo">
        <p>{{val}}</p>
      </div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          userInfo: {
            name: "whh",
            age: 1,
            sex: "woman",
          },
        },
      });
    </script>
  </body>
</html>

运行结果：
在这里插入图片描述
注意
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除，直接进行 app.userInfo.height=‘180cm’ 这样操作是不会构成响应式，不会触发视图更新。必须使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

直接进行 app.userInfo.height=‘170cm’，视图未能更新：
在这里插入图片描述
使用 Vue.set(object, key, value) 方法：

Vue.set(app.userInfo, "height", "170cm");

请添加图片描述
所以，使用对象方法时，要想触发视图更新，常常需要使用 Vue.set() 去操作。