【Vue3 从入门到实战进阶式掌握完整知识体系】007-Vue语法基础：列表循环渲染

墨蓝 2023-10-03 08:40 28阅读 0赞

### 文章目录 ###

*   *  7、列表循环渲染
     *   *  使用v-for渲染数组
         *  运行结果
         *  使用v-for渲染对象
         *  运行结果
         *  使用key优化性能
         *  运行结果
         *  控制数组
         *  给对象添加属性
         *  运行结果
         *  循环n次
         *  运行结果
         *  指定某元素不显示
         *  运行结果
         *  存在问题
         *  解决问题：使用template
         *  运行结果

## 7、列表循环渲染 ##

### 使用v-for渲染数组 ###

### 运行结果 ###

![image-20210612200822736.png][]

### 使用v-for渲染对象 ###

### 运行结果 ###

![image-20210612201355510.png][]

### 使用key优化性能 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data() {
         
          return {
         
            message: "Hello World!",
            list: [1, 2, 3, 4]
          }
        },
        methods: {
         
          addItem(){
         
            this.list.push(1000);
          }
        },
        // 这里可以用 item in list 也可以用 item of list
        // 我们在添加新的元素的时候，vue 会智能决定渲染（创建）的内容
        // 没有改变的内容不渲染，复用原来的，新增加的内容就渲染
        // 但是，并非所有的时候 vue 都能准确判断一个元素是否是新的
        // 我们需要使用 :key 来绑定一个“唯一”的值，来帮助 vue 判断
        // 如果有相同的值就复用之前的 DOM 反之创建新的
        // 这个 key 一般不用 index ，因为每个元素对应的 index 都不一样
        // 就导致用了等于没用（这点比较偏向 vue 的底层）
        template: `
            <div v-for='(item, index) in list' :key="item">
                {
          { item }} -- {
          { index }}
            </div>
            <button @click="addItem">addItem</button>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210612202721696.png][]

### 控制数组 ###

此外，我们可以通过控制数组来控制列表的渲染，这里就暂且省略了；

### 给对象添加属性 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data() {
         
          return {
         
            message: "Hello World!",
            object: {
         
              one: "大哥刘备",
              two: "二哥关羽",
              three: "三哥张飞",
              four: "四哥赵云"
            }
          }
        },
        methods: {
         
          addAttrs(){
         
            this.object.five = "柏拉图";
            this.object.six = "苏格拉底";
            this.object.seven = "亚里士多德";
          }
        
        },
        // 这里可以用 item in list 也可以用 item of list
        template: `
            <div v-for='(value, key, index) in object'>
                {
          { key }} -- {
          { value }} -- {
          { index }}
            </div>
            <button @click="addAttrs">add</button>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210612205508685.png][]

### 循环n次 ###

### 运行结果 ###

![image-20210612205724722.png][]

### 指定某元素不显示 ###

> 可灵活运用，但是不要将 v-for 和 v-if 下载一个标签里，v-for 的权限更高！

### 运行结果 ###

![image-20210612210125000.png][]

### 存在问题 ###

![image-20210612210331252.png][]

### 解决问题：使用template ###

> 使用 template 代替 div ， template 只是一个占位符！

### 运行结果 ###

![image-20210612210548947.png][]

[image-20210612200822736.png]: https://img-blog.csdnimg.cn/img_convert/c29be29c87f06bc3b950a81f561bb7fd.png
[image-20210612201355510.png]: https://img-blog.csdnimg.cn/img_convert/52236f3a95a8c30a1fd12864722efe62.png
[image-20210612202721696.png]: https://img-blog.csdnimg.cn/img_convert/438450a400cab5639d197048c3632317.png
[image-20210612205508685.png]: https://img-blog.csdnimg.cn/img_convert/bf2580d2f9f2bf3d6a9e670b4e1bf92d.png
[image-20210612205724722.png]: https://img-blog.csdnimg.cn/img_convert/05ed21c6a86cc13df0f2e15d8499d64f.png
[image-20210612210125000.png]: https://img-blog.csdnimg.cn/img_convert/021566705fec1da1614d16850d202866.png
[image-20210612210331252.png]: https://img-blog.csdnimg.cn/img_convert/18bce86d31ab18480e30d281f1bb57ce.png
[image-20210612210548947.png]: https://img-blog.csdnimg.cn/img_convert/8a7c4fc52c914722dc6ee9d436a3ed75.png