列表循环、表单元素绑定

v-for指令

作用：根据数据生成列表结构

• 数组经常和v-for结合使用
• 数组长度的更新会同步到页面上面，是响应式的

语法：(item,index) in 数据，其中item代表每一项，index代表索引

<div id="app"><ul><li v-for="(item,index) in arr" :title="item">{{index}}:{{item}}</li><li v-for="(item,index) in objArr">{{item.name}}</li></ul></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var app = new Vue({el:"#app",data:{arr:[1,2,3,4,5],objArr:[{name:"Jack"},{name:"Rose"}]}})
</script>

v-model指令

作用：获取或设置表单元素的值（绑定的数据和表单元素的值双向数据绑定）
语法：

 <div id="app"><input type="text" v-model="message" @keyup.enter="getM"><h2>{{message}}</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {message: "hello"},methods: {getM: function () {alert(this.message);}},})</script>

效果: