zoukankan      html  css  js  c++  java
  • vue暗含玄机的v-for指令

    由于是多个事项,那么这个数据模型是一个数组;为了显示这些代办事项我们首先添加一些样本数据 

    <script>
      export default {
        data() {
          return {
         title: 'vue-todos', tableData: [{ date:
    '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } } </script>

    v-for使用方法一:

    v-for指令遍历list的时候用 in/of皆可,此处概念可能与forin/forof有冲突,不能类比

    <ul>
         <li v-for="todo in todos">
                <label>{{todo.name}}</label>
         </li>
         
    </ul>    

    v-for使用方法二:

    v-for指令遍历list的时候用 in/of皆可,此处概念可能与forin/forof有冲突,不能类比

    如果我们要输出待办事项的序号,可以使用v-for中隐藏的一个index值来实现

    <ul>
         <li v-for="(todo,index) in todos"
        :id="index">
                <label>{{index+1}}   {{todo.name}}</label>
         </li>
         
    </ul>  

    只要用括号括住引用参数,最后一个值就是循环的索引

    另外这里使用了属性绑定语法,

    :id="index"意思是将index的值输出到DOM的属性id上

    v-for使用方法三:

    v-for指令遍历object的时候同样用 in/of皆可,此处概念同样与forin/forof有冲突,不能类比

    v-for不单单可以循环渲染数组,还可以渲染对象属性:例如

    <ul>
         <li v-for="value in object">
                <label>{{value}}</label>
         </li>
         
    </ul>  
    
    data(){
            return{
                object{
                    first_name: "Ray",
                    last_name: "Liang"
            }
        }
    }    

    输出:

      “Ray"

      "Liang"

    v-for使用方法四:

    v-for指令遍历object的时候同样用 in/of皆可,此处概念同样与forin/forof有冲突,不能类比

    v-for不单单可以循环渲染数组,还可以渲染对象属性,如果我们要输出待办事项的序号--此处显示为object中的key字段名称,可以使用v-for中隐藏的一个index值来实现:

    <li v-for="(value,index) of object" :key="index">
                <label>{{index}} {{value}}</label>
     </li>
    
    data(){
            return{
                object{
                    first_name: "Ray",
                    last_name: "Liang"
            }
        }
    }   

    打印:

    • first_name “Ray"
    • last_name "Liang"
  • 相关阅读:
    出现socket:(10107)系统调用失败
    JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
    获取滚动条距离底部的距离
    linux常用命令使用方法
    Python:一
    【C++ Primer 第15章】定义派生类拷贝构造函数、赋值运算符
    【【C++ Primer 第15章】 虚析构函数
    ubuntu基本用法
    深度优先搜索(DFS)和广度优先搜索(BFS)
    【C++ Primer 第7章】定义抽象数据类型
  • 原文地址:https://www.cnblogs.com/yanl55555/p/12096945.html
Copyright © 2011-2022 走看看