阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js 循环语句

      循环语句

      循环使用 v-for 指令。

      v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。

      v-for 可以绑定数据到数组来渲染一个列表:

      <div id="app">
        <ol>
          <li v-for="site in sites">
            {{ site.name }}
          </li>
        </ol>
      </div>
      
      <script>
      new Vue({
        el: '#app',
        data: {
          sites: [
            { name: 'axihe' },
            { name: 'Google' },
            { name: 'Taobao' }
          ]
        }
      })
      </script>
      

      模板中使用 v-for:

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

      v-for 迭代对象

      v-for 可以通过一个对象的属性来迭代数据:

      <div id="app">
        <ul>
          <li v-for="value in object">
          {{ value }}
          </li>
        </ul>
      </div>
      
      <script>
      new Vue({
        el: '#app',
        data: {
          object: {
            name: '阿西河前端教程',
            url: 'http://www.axihe.com',
            slogan: '一个助你成为全栈开发的网站'
          }
        }
      })
      </script>
      

      你也可以提供第二个的参数为键名:

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

      第三个参数为索引:

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

      v-for 迭代整数

      v-for 也可以循环整数

      <div id="app">
        <ul>
          <li v-for="n in 10">
           {{ n }}
          </li>
        </ul>
      </div>
      
      目录
      目录