1.7 双向数据绑定
v-model双向数据绑定指令：
- 数据层M层发生变化会影响视图层V层改变
- 视图层V层发生变化会影响数据层M层改变
使用v-bind属性绑定的形式，能渲染出来，但是当修改文本框中数据时，M层中的数据不会改变。
使用v-model代替v-bind
1.7.1 v-model修饰符
v-model可以添加修饰符
如：数字修饰符number，表示用户只能输入数字
过滤首尾空格修饰符 .trim
.lazy修饰符：内容发生变化，并且在失去焦点时触发。
即修改值时，插值表达式的渲染结果不会立即发生变化，要等到文本框失去焦点后才变。
1.7.2 使用v-model实现计算器案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>使用v-model实现计算器案例</title> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app" v-cloak> <input type="text" v-model="num1" placeholder="请输入第一个数字"> <select v-model="sel"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" v-model="num2" placeholder="请输入第二个数字"> <input type="button" value="=" @click="btn"> <input type="text" v-model="res"> </div> <!--引入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { msg: "Hello World", num1 : null, sel : '+', num2 : null, res : null }, methods: { btn(){ if (this.sel == "+"){ this.res = parseInt(this.num1) + parseInt(this.num2) } else if (this.sel == "-"){ this.res = parseInt(this.num1) - parseInt(this.num2) } else if (this.sel == "*"){ this.res = parseInt(this.num1) * parseInt(this.num2) } else{ this.res = parseInt(this.num1) / parseInt(this.num2) } } } }) </script> </body> </html>
