zoukankan      html  css  js  c++  java
  • vue-v-for

    v-for 指令可以绑定数组的数据来渲染一个项目列表:

    <div id="app-4">
    <ol>
    <li v-for="todo in todos">
    {{ todo.text }}
    </li>
    </ol>
    </div>

    var app4 = new Vue({
    el: '#app-4',
    data: {
    todos: [
    { text: '学习 JavaScript' },
    { text: '学习 Vue' },
    { text: '整个牛项目' }
    ]
    }
    })
    
    

    我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。
    v-for用于列表渲染

    在 v-for 块中,我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

    <ul id="example-2">
    <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
    </ul>



    var example2 = new Vue({
    el: '#example-2',
    data: {
    parentMessage: 'Parent',
    items: [
    { message: 'Foo' },
    { message: 'Bar' }
    ]
    }
    })

    <body>
    <!-- 一个对象的v-for -->
    <!-- 第二个值是键名 -->
    <!-- 第三个是索引 -->
    <ul id="v-for-object">
    <li v-for="(item, key, index) in object">
    {{key}}:{{item}}--{{index}}
    </li>
    </ul>
    <script src="vue.js"></script>
    <script>
    new Vue({
    el: '#v-for-object',
    data: {
    object: {
    firstName: 'zhangsan',
    secondName: 'lisi',
    age: 18
    }
    }
    })
    </script>
    </body>
    v-for和v-if
    v-for的优先级比v-if高,所以v-if将分别运行在每个v-for循环中(可以为仅有的一些项渲染)



  • 相关阅读:
    九度-题目1197:奇偶校验
    九度-题目1073:杨辉三角形
    九度-题目1072:有多少不同的面值组合?
    同步异步,阻塞非阻塞
    注解方式配置bean
    监听器
    自定义系统初始化器
    构建流
    数值流
    流的使用
  • 原文地址:https://www.cnblogs.com/limengyao/p/9242511.html
Copyright © 2011-2022 走看看