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>

    时间如白驹过隙,忽然而已,且行且珍惜......
  • 相关阅读:
    性能测试方案和用例模板
    软件质量报告模板-产品质量度量
    性能测试报告模板
    SQL查询语法30例
    性能测试:Jmeter-Beanshell请求加密实例
    安全性测试:OWASP ZAP 2.8 使用指南(三):ZAP代理设置
    centos7下使用x11远程带窗口安装Oracle
    python Linux 环境 (版本隔离工具)
    Python多版本环境搭建(Linux系统)
    ArrayList1.8
  • 原文地址:https://www.cnblogs.com/UnfetteredMan/p/13050115.html
Copyright © 2011-2022 走看看