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>
