用途：通过监听控件，来响应数据的变化，做后续的一系列操作。
例如：下文中监听了km的输入框控件，当控件内的数值发生变化时，展示出来。
使用方法：
- 声明控件为 v-model
- 未控件初始化数值
- 数值计算
- 数据监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>千米和米的转换</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="computed_transform_distance">
<!-- v-model 是什么意思啊？ -->
千米： <input type="text" v-model = "km">
米： <input type="text" v-model = "m">
<p id="info"></p>
</div>
<script>
var vm = new Vue({
// 指定要修改的内容区域
el: '#computed_transform_distance',
// 给元素初始化内容
data: {
km: 0,
m: 0
},
//监听内容的变化，响应式修改其他控件的内容。
watch: {
km: function(val) {
this.km = val;
this.m = this.km * 1000;
},
m: function(val) {
this.m = val;
this.km = this.m / 1000
}
}
})
//监听数据变化后回调的方法
vm.$watch('km', function(newValue, oldValue){
//这个回调将在vm.km发生变化的时候调用。
document.getElementById('info').innerHTML = "修改前的值：" + oldValue + "修改后的值： " + newValue;
})
</script>
</body>
</html>
Q1: v-model是干啥用的？
可以使用v-model指定在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。（来自Vue官网）
网友评论