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>
1235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
