zoukankan      html  css  js  c++  java
  • Vue使用v-for遍历数组和对象

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>Vue-Computed计算属性</title>
     6         <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
     7         <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.0/index.js"></script>
     8         <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.0/theme-chalk/index.css" rel="stylesheet">
     9     </head>
    10     <body>
    11         <div id="app">
    12             
    13             <!-- v-for遍历数组 -->
    14             <ul>
    15                 <li v-for="(item,index) in items" :key="index">
    16                     <span v-for="(ite,key) in item" :key="key">{{index}}---{{key}}---{{ite}}</span>
    17                 </li>
    18             </ul>
    19             <ul>
    20                 <li v-for="(item,key) of items" :key="key">
    21                     <span v-for="(ite,key) in item" :key="key">{{ite}}</span>
    22                 </li>
    23             </ul>
    24             
    25             <!-- v-for遍历对象 -->
    26             <ul>
    27                 <li v-for="value in obj">{{value}}</li>
    28             </ul>
    29             <ul>
    30                 <li v-for="(value,key) in obj">{{key}}---{{value}}</li>
    31             </ul>
    32             
    33             <!-- 推荐使用这种,为标签绑定唯一的key,提高复用性 -->
    34             <ul>
    35                 <li v-for="(value,key,index) in obj" :key="index">{{index}}---{{key}}---{{value}}</li>
    36             </ul>
    37         </div>
    38         <script>
    39             var vm = new Vue({
    40                 el: '#app',
    41                 data: {
    42                     items: [
    43                         {
    44                             message: 'Foo'
    45                         },
    46                         {
    47                             message: 'Bar'
    48                         }
    49                     ],
    50                     obj:{
    51                         name:'测试',
    52                         age:'23',
    53                         address:'商丘'
    54                     }
    55                 },
    56                 methods: {
    57 
    58                 }
    59             })
    60         </script>
    61     </body>
    62 </html>
  • 相关阅读:
    判断二叉树是否是完全二叉树
    二叉搜索树的第k个节点
    二叉树的深度
    二叉搜索树与双向链表
    二叉搜索树的后序遍历序列
    poj 2192 (DP)
    poj 1159 (DP LCS)
    poj 1934(LCS)
    《编程之美》读书笔记 -- 1.2中国象棋问题
    poj 1050(DP)
  • 原文地址:https://www.cnblogs.com/lyt520/p/13706849.html
Copyright © 2011-2022 走看看