1. 遍历数组

1.1 < li > 标签中使用

语法示例

<li v-for="site in sites">{
   
   { site.name }} : {
   
   {site.attack}}</li>

完整示例

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CROW SONG</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ol>
        <li v-for="site in sites">{
   
   { site.name }} : {
   
   {site.attack}}</li>
      </ol>
    </div>

    <script>
      new Vue({
      
      
        el: "#app",
        data: {
      
      
          sites: [
            {
      
       name: "关羽", attack: 95 },
            {
      
       name: "张飞", attack: 90 },
            {
      
       name: "赵云", attack: 97 },
            {
      
       name: "马超", attack: 92 },
            {
      
       name: "黄忠", attack: 88 },
          ],
        },
      });
    </script>
  </body>
</html>

打印结果

在这里插入图片描述

1.2 模板中使用

语法示例

      <ul>
        <template v-for="site in sites">
          <li > xxxxxxx </li>
        </template>
      </ul>

完整示例

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CROW SONG</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 }} : {
   
   {site.attack}}</li>
          <li>====================</li>
        </template>
      </ul>
    </div>

    <script>
      new Vue({
      
      
        el: "#app",
        data: {
      
      
          sites: [
            {
      
       name: "关羽", attack: 95 },
            {
      
       name: "张飞", attack: 90 },
            {
      
       name: "赵云", attack: 97 },
            {
      
       name: "马超", attack: 92 },
            {
      
       name: "黄忠", attack: 88 },
          ],
        },
      });
    </script>
  </body>
</html>

输出

2. 迭代对象属性

2.1 迭代第一个参数（值）

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW SONG</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="info in object">
        {
   
   { info }}
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      
      
      el: '#app',
      data: {
      
      
        object: {
      
      
          name: '关羽',
          belong: '蜀',
          attack: 98
        }
      }
    })
  </script>
</body>

</html>

输出

2.2 迭代第二个参数（键名）

  <div id="app">
    <ul>
      <li v-for="(value,key) in object">
        {
    
    {
    
     key }} : {
    
    {
    
    value}}
      </li>
    </ul>
  </div>

显示结果

2.3 第三个参数（索引值）

  <div id="app">
    <ul>
      <li v-for="(value,key,index) in object">
       {
   
   {index}} : {
   
   { key }} : {
   
   {value}}
      </li>
    </ul>
  </div>

在这里插入图片描述

3. 遍历整数范围

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</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 8">
        {
   
   { n }}
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      
      
      el: '#app'
    })
  </script>
</body>

</html>

结果输出

Vue.js基础-04-循环语句

文章目录

1. 遍历数组

1.1 < li > 标签中使用

语法示例

完整示例

1.2 模板中使用

语法示例

完整示例

2. 迭代对象属性

2.1 迭代第一个参数（值）

2.2 迭代第二个参数（键名）

2.3 第三个参数（索引值）

3. 遍历整数范围

猜你喜欢