v-for:遍历所在集合，数组..内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="add" @click="addClick"/> <input type="button" value="remove" @click="removeClick"/> <ul> <li v-for="city in cities"> {{city}} </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ cities:["西安","北京","上海","杭州"] }, methods:{ addClick:function(){ this.cities.push("深圳"); }, removeClick:function(){ this.cities.pop(); } } }) </script> </body> </html>
v-for是根据数据生成列表结构
数组和v-for经常联合使用
语法是（item，index）in 数据
数组长度跟新会同步到页面，是响应式的
on的事件修饰符keyup
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" @keyup.enter="enter"/> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app=new Vue({ el:"#app", methods:{ enter:function(){ alert("nihao") } } }) </script> </body> </html>
事件后面跟修饰符可以限制
.enter可以触发限制
修饰符有很多种
v-model
获取和设置表单元素（双向数据绑定）
双向的意思是修改表单data里的值就会变，修改data，表单里的值会变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="message"/> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ message:"欢迎学习vue" } }) </script> </body> </html>
在文本框里修改，内存中的值会同时改变
v-model指令作用是便捷的获取和设置表单元素，
绑定数据会和表单元素的值相关联
绑定数据是双向的