Vue监听属性

最新推荐文章于 2024-07-07 06:59:05 发布

鹏不是这个朋

最新推荐文章于 2024-07-07 06:59:05 发布

阅读量98

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/baiqiaoxiang/article/details/118528643

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>监听属性</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p style="font-size:25px;">计数器:{{counter}}</p>
			<button @click="counter++" style="font-size:25px;">点我</button>
		</div>
		<div id="computed_propos">
			千米：<input type="text" v-model="kilometers" />
			米：<input type="text" v-model="meters" />
			<p id="info"></p>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					counter: 1
				}
			});
			vm.$watch('counter', function(nval, oval) {
				alert('计数器值的变化：' + oval + '变为' + nval + '!');
			});
			var v = new Vue({
				el: '#computed_propos',
				data: {
					kilometers: 0,
					meters: 0
				},
				methods: {},
				computed: {},
				watch: {
					kilometers: function(val) {
						this.kilometers = val;
						this.meters = this.kilometers * 1000
					},
					meters: function(val) {
						this.kilometers = val / 1000;
						this.meters = val;
					}
				}
			})
			// $watch 是一个实例方法
			v.$watch('kilometers', function(newValue, oldValue) {
				// 这个回调将在 vm.kilometers 改变后调用
				document.getElementById("info").innerHTML = "修改前值为：" + oldValue + "，修改后值为：" + newValue;
			})
		</script>
	</body>
</html>

鹏不是这个朋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue监听属性

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>监听属性</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p style="font-size:25px;">计数器:{{
复制链接

扫一扫

专栏目录