示例小白教程网www.2d5.net 代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.JS-监听属性-千米与米之间的换算</title>
<!--加载本地vue.js的框架-->
<script src="vue2.2.2.min.js"></script>
</head>
<body>
<!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值-->
<div id="app">
在下面输入框输入数字,会自动转成多少米<br><br>
千米:<input type="text" v-model="qianmi" />
<!--输入框的内容双向绑定到了属性qianmi-->
<hr>
在下面输入框输入数字,会自动转成多少千米<br><br>
米:<input type="text" v-model="mi" /><hr>
<!--输入框的内容双向绑定到了属性mi-->
<p id="info"></p>
</div>
<script>
//Vue语句-开始
var vm = new Vue({
el: '#app', //app为前面div区块的id的值,通过"#"号绑定
data: {
qianmi:0, //初始化属性值
mi:0 //初始化属性值
},
watch:{
//当千米后面的输入框数字改变的时候,会触发该监听方法
qianmi:function(val){
this.qianmi = val;
this.mi = val * 1000; //单位换算,米=千米数字*1000
},
//当米后面的输入框数字改变的时候,会触发该监听方法
mi:function(cs){
this.mi = cs;
this.qianmi = cs /1000; //单位换算,千米=米数字/1000
}
}
})//Vue语句-结束
// $watch 是一个实例方法
vm.$watch('qianmi', function (newValue, oldValue) {
// 这个回调将在 千米输入框数字 改变后调用
document.getElementById ("info").innerHTML = "【千米】修改前值为: " + oldValue + ",修改后值为: " + newValue;
})
</script>
</body>
</html> 效果图小白教程网www.2d5.net
|