zoukankan      html  css  js  c++  java
  • 循环使用 v-for 指令。

    循环语句

    循环使用 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: 'Runoob' },
          { name: 'Google' },
          { name: 'Taobao' }
          ]
       }
    })
    </script>

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

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

    <script>
      new Vue({
        el: '#app',
        data: {
          object: {
            name: '菜鸟教程',
            url: 'http://www.runoob.com',
            slogan: '学的不仅是技术,更是梦想!'
           }
         }
      })
    </script>

    第三个参数为索引:

    <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: '菜鸟教程',
        url: 'http://www.runoob.com',
        slogan: '学的不仅是技术,更是梦想!'
        }
      }
    })
    </script>

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

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

    时间如白驹过隙,忽然而已,且行且珍惜......
  • 相关阅读:
    HYSBZ 2818 gcd
    hdu1695 GCD
    HYSBZ 2301
    poj 2096
    正则表达式匹配HTML标签或标记
    [转载]Sed 命令详解 正则表达式元字符
    [转载]Shell删除各种注释的脚本
    [转载]sed实现直接修改文件内容
    [转载]强大的grep用法详解:grep与正则表达式
    [转载]【Shell脚本】逐行处理文本文件
  • 原文地址:https://www.cnblogs.com/UnfetteredMan/p/13050115.html
Copyright © 2011-2022 走看看