1 <div id="app" >
2 <ol>
3 <li v-for='car in cars'>
4 {{car.name}}
5 </li>
6 </ol>
7 <ul>
8 <li v-for='(food,index) in foods'>
9 {{index}}---{{food}}---{{delicious}}
10 </li>
11 </ul>
12 <ul>
13 <li v-for='(value,key,index) in object'>
14 {{index}}.{{key}}.{{value}}
15 </li>
16 </ul>
17 <div>
18 <span v-for='n in 10' style="margin-left:5px">{{n}}</span>
19 </div>
20 <span v-for='n in evenNumbers' style="margin-left:5px">{{n}}</span>
21 </div>
22 <!-- <div>
23 <span v-for='n in odd(counts)' style="margin-left:5px">{{n}}</span>
24 </div> -->
25 </div>
26 ---
27 var app = new Vue({
28 el: '#app',
29 data:{
30 delicious:'delicious',
31 cars:[
32 {name:'Benz'},
33 {name:'BMW'}
34 ],
35 foods:[
36 'tomato',
37 'potato',
38 'ice cream'
39 ],
40 object :{
41 name:'Benz',
42 age:'18'
43 },
44 numbers:[1,2,3,4,5,6,7,8,9,10],
45 counts:[1,2,3,4,5]
46 },
47 computed:{
48 evenNumbers:function(){
49 return this.numbers.filter(function(number){
50 return number%2 === 0
51 })
52 }
53 },
54 methods:{
55 odd:function(counts){
56 return counts.filter(function(count){
57 return count%2 === 1;
58 })
59 }
60 }
61 })
62 解读:
63
64 v-for指令能够让我们循环渲染列表型数据,数据放在data对象中,类型可以如下:
65 data:{
66 //数字数组
67 numbers:[1,2,3,4,5,6,7,8,9,10],
68 counts:[1,2,3,4,5]
69 //字符串数组
70 foods:[
71 'tomato',
72 'potato',
73 'ice cream'
74 ],
75 //对象数组
76 cars:[
77 {name:'Benz'},
78 {name:'BMW'}
79 ],
80 //对象
81 object :{
82 name:'Benz',
83 age:'18'
84 },
85 }
86 根据不同类型的数据,v-for指令在模板中具体采用的语法如下:
87 //数据为数字数组
88 <div>
89 <span v-for="n in numbers">{{n}}</span>
90 </div>
91 ---
92 //数据为字符数组
93 <ul>
94 <ol v-for='food in foods'>{{food}}</ol>
95 </ul>
96 ---
97 //数据为对象
98 <ul>
99 <ol v-for="value in object">{{value}}</ol>
100 </ul>
101 //或者
102 <ul>
103 <ol v-for="(value,key,index) in object">{{index}}.{{key}}.{{value}}</ol>
104 </ul>
105 ---
106 //数据为对象数组
107 <ul>
108 <ol v-for="car in cars">{{car.name}}</ol>
109 </ul>
110 在 v-for块中,我们拥有对父作用域属性的完全访问权限;
111 【demo】
112
113 2.7 事件监听
114
115 简单的事件监听——直接在指令上处理数据
116
117 <div id="#app">
118 <p v-on:click="counter+=1">{{counter}}</p>
119 </div>
120 ---
121 var app = new Vue({
122 el: "#app",
123 data:{
124 counter: 0,
125 }
126 })
127 复杂的事件监听——在methods对象定义回调函数
128
129 <div id="#app">
130 <p v-on:click="greet">{{vue}</p>
131 </div>
132 ---
133 var app = new Vue({
134 el: "#app",
135 data:{
136 vue:"hello Vue.js"
137 },
138 methods:{
139 greet:function(event){
140 console.log(this.vue)
141 }
142 }
143 })
【推荐】华为云11.11普惠季 血拼风暴 一促即发
【拼团】腾讯云服务器拼团活动又双叒叕来了!
【工具】SpreadJS纯前端表格控件,可嵌入应用开发的在线Excel
【推荐】腾讯云新注册用户域名抢购1元起
· 坚持写博一年半,我的收获与成长
· VueJs2.0建议学习路线
· 20170116 码农日报
· vue入门
· Vue - 起手式