Vue.js - Vue循环属性 - 《前端学习》

v-for

v-for

根据数据生成列表结构语法：（item，index）in 数据 item和index可以和其他指令一起使用数组长度的更新会同步到页面上，为响应式 v-for可以绑定数据到数组来渲染一个列表

实例-循环列表

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>v-for 实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ol>
        <li v-for="A in B">{{ A.name }}</li>
      </ol>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          B: [
            { name: "春" },
            { name: "夏" },
            { name: "秋" },
            { name: "冬" },
          ],
        },
      });
    </script>
  </body>
</html>

实例-循环整数（1-10）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>v-for 循环整数</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="n in 10">{{ n }}</li>
      </ul>
    </div>
    <script>
      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>

实例-遍历对象属性

通过对象属性来迭代数据语法： （value，key，index）in user 有三个参数

value属性
key参数
index索引

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 </title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(value, key, index) in object">
          {{ index }}. {{ key }} : {{ value }}
        </li>
      </ul>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          object: {
            name: "张忠兴",
            age: "7900岁",
            slogan: "正在读高二",
          },
        },
      });
    </script>
  </body>
</html>

实例-循环理解

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 </title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <template v-for="site in sites">
          <li>{{ site.name }}</li>
          <li>--------------</li>
        </template>
      </ul>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          sites: [{ name: "Runoob" }, { name: "Google" }, { name: "Taobao" }],
        },
      });
    </script>
  </body>
</html>

实例-属性遍历

<!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>v-for指令</title>
</head>
<body>
<div id="app">
    <input type="button" value="添加数据" @click="add">
    <input type="button" value="移除数据" @click="remove">
    <ul>
        <li v-for="(it,index) in arr">
            {{ index + 1 }}黑马程序员校区:{{ it }}
        </li>
    </ul>
    <h2 v-for="item in vegetables" v-bind:title="item.name">
        {{ item.name }}
    </h2>
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            arr: ["北京", "上海", "广州", "深圳"],
            vegetables: [
                {name: "西兰花炒蛋"},
                {name: "蛋炒西蓝花"}
            ]
        },
        methods: {
            add: function () {
                this.vegetables.push({name: "糖醋排骨"});
            },
            remove: function () {
                this.vegetables.shift();
            }
        },
    })
</script>
</body>
</html>