vue day2

 1 <!DOCTYPE <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <title>Page Title</title>
 7     <meta name="viewport" content="width=device-width, initial-scale=1">
 8     <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
 9     <script src="main.js"></script> -->
10     <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
11 
12 </head>
13 <body>
14 
15         <ul id="example-2">
16             <li v-for="(item, index) in items"  >
17                 <a v-if="seen">v-if /.</a> {{ parentMessage }} - {{ index }} - {{ item.message }}
18                 <a v-show="ken">.v-show /.</a>
19                 <p v-if="ok">ok</p>
20                 <p v-else="ok">no</p>
21             </li>
22         </ul>
23 
24         <ul id="v-for-object" class="demo">
25             <div v-for="(value, key, index) in object"  >
26                     {{ index }}. {{ key }}: {{ value }}
27             </li>
28         </ul>
29         <ul id ="app3">
30                 <li v-for="n in evenNumbers">{{ n }}</li>
31                 <div>
32                     <span v-for="n in 10">{{ n }} </span>
33                 </div>
34         </ul>
35 
36 
37 </body>
38 
39 <script>
40     
41 
42 
43      new Vue({
44         el: '#app3',
45         data: {
46         numbers: [ 1, 2, 3, 4, 5 ]
47             },
48             computed: {
49             evenNumbers: function () {
50                 return this.numbers.filter(function (number) {
51                 return number % 2 === 0
52                 })
53             }
54             }
55         })
56 
57     new Vue({
58   el: '#v-for-object',
59   data: {
60     object: {
61       firstName: 'John',
62       lastName: 'Doe',
63       age: 30
64     }
65   }
66 })
67 
68    app1=  new Vue({
69         el: '#example-2',
70         data: {
71             parentMessage: 'Parent',
72             seen:true,
73             ken:false,  //style="display: none;"
74             ok:true,
75             items: [
76             { message: 'Foo' },
77             { message: 'Bar' },
78             { message: 'Paa' },
79             { message: 'qcc' }
80             ]
81         }
82     })
83 
84 </script>
85 </html>
posted on 2018-09-06 09:22 Aaron_Net 阅读(121) 评论(0) 编辑收藏举报