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>
标签：修饰符,num1,num2,res,绑定,双向,parseInt,model,数据 From： https://www.cnblogs.com/callbin/p/16955732.html