【Vue 从入门到实战进阶式掌握完整知识体系】007

2025-07-26 20:43:36

【Vue 从入门到实战进阶式掌握完整知识体系】007 7、列表循环渲染使用v-for渲染数组代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http

【Vue 从入门到实战进阶式掌握完整知识体系】007

7、列表循环渲染

使用v-for渲染数组

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!",
        list: ["大哥刘备", "二哥关羽", "三哥张飞", "四哥赵云"]
      }
    },
    // 这里可以用 item in list 也可以用 item of list
    template: `
        <div v-for='(item, index) in list'>
            {{ item }} -- {{ index }}
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061220082276.png

使用v-for渲染对象

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!",
        object: {
          one: "大哥刘备",
          two: "二哥关羽",
          three: "三哥张飞",
          four: "四哥赵云"
        }
      }
    },
    // 这里可以用 item in list 也可以用 item of list
    template: `
        <div v-for='(value, key, index) in object'>
            {{ key }} -- {{ value }} -- {{ index }}
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061220155510.png

使用key优化性能

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!",
        list: [1, 2, , 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>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210612202721696.png

控制数组

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

给对象添加属性

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!",
        object: {
          one: "大哥刘备",
          two: "二哥关羽",
          three: "三哥张飞",
          four: "四哥赵云"
        }
      }
    },
    methods: {
      addAttrs(){
        five = "柏拉图";
        six = "苏格拉底";
        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>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210612205508685.png

循环n次

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!"
      }
    },
    // 这里可以用 item in list 也可以用 item of list
    template: `
        <div v-for='item in 10'>
          {{message}}
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210612205724722.png

指定某元素不显示

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

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!"
      }
    },
    // 这里可以用 item in list 也可以用 item of list
    template: `
        <div v-for='item in 10'>
          <div v-if="item!=8">{{item}}</div>
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210612210125000.png

存在问题

image-202106122101252.png

解决问题：使用template

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

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: "Hello World!"
      }
    },
    // 这里可以用 item in list 也可以用 item of list
    template: `
        <template v-for='item in 10'>
          <div v-if="item!=8">{{item}}</div>
        </template>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210612210548947.png本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除基础入门语法渲染vue

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1200278.html

本站网友依波路	12分钟前发表
"二哥关羽"
本站网友阿那曲唑	19分钟前发表
template 只是一个占位符！代码语言：javascript代码运行次数：0运行复制<!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
本站网友猪血的功效与作用	28分钟前发表
"二哥关羽"
本站网友女人更年期症状	9分钟前发表
// 这里可以用 item in list 也可以用 item of list template
本站网友尚德电力控股有限公司	4分钟前发表
"二哥关羽"
本站网友治疗前列腺增生	15分钟前发表
["大哥刘备"

【Vue 从入门到实战进阶式掌握完整知识体系】007