Vue中的v-model
双向数据绑定:
方向1:data----->view
之前所接触的循环,判断,显示隐藏等指令,主要的功能是将数据绑定到视图
方式:(1)双花括号 (2)常见的指令
方向2:view----->data
将表单控件中用户操作的结果绑定到数据
方式:v-model
v-model指令本身就是一个双向数据绑定的指令,即可以将数据绑定到视图,又可以将视图中的结果绑定到数据
修饰符:
.lazy:取代input监听change事件(在输入完之后,失去焦点,再去更新)
.number:输入字符串转为数字
.trim:输入首尾空格过滤
例子:
<body>
<div id="container">
<button @click="modifyMsg">修改msg</button>
<!-- 方向:将定义好的数据绑定到视图
实现方式:花括号,常见的Vue的指令:v-for,v-if,v-show。。。 -->
<p>{{msg}}</p>
<!-- 多数指的是表单控件 input/textarea/select...
实现方式:v-model -->
<input type="text" v-model="uesrAddrss">
<p>{{"用户输入的结果为:"+uesrAddrss}}</p>
<!-- 练习:有两个输入框,一个按钮
点击按钮时将输入框输入的数据进行求和,将结果输出到控制台 -->
<input type="text" v-model.number="num1">
<input type="text" v-model.number="num2">
<button @click="addSum">计算</button>
<p>{{"用户输入的结果为:"+num3}}</p>
<input type="text" v-model.trim="myNotes">
<p>{{myNotes.length}}</p>
</div>
<script>
new Vue({
el: "#container",
data: {
msg: '麻子',
uesrAddrss: '西安飞天路',
num1: 0,
num2: 0,
num3: 0,
myNotes:''
},
methods: {
modifyMsg: function () {
this.msg = "mazi"
},
addSum: function () {
this.num3 = this.num1 + this.num2
}
}
})
</script>
</body>