小练习：watch监控数据

想当程序员$

于 2020-04-17 15:47:15 发布

阅读量108

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/weixin_43169510/article/details/105582016

版权

vue.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script type="text/javascript" src="../assets/js/vue.js"></script>
		<title>HelloWord</title>
	</head>
	<body>
		<h1>Hello Word</h1>
		<hr>
		<div id="app">
			<p>今日温度:{{wendu}}</p>
			<p>穿衣建议:{{chuanyi}}</p>
			<button @click="add">添加温度</button>
			<button @click="reduce">减少温度</button>
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					wendu: 12,
					chuanyi: '夹克长裙',

				},
				methods: {
					add: function() {
						this.wendu += 5;
					},
					reduce: function() {
						this.wendu -= 5;
					}

				},
				watch: {//监控数据
					wendu: function(newVal, oldVal) {
						if (newVal >= 26) {
							this.chuanyi = "背心";
						} else if (newVal < 26 && newVal >= 10) {
							this.chuanyi = "长袖";
						} else {
							this.chuanyi = "羽绒服";
						}
					}
				}
			})
		</script>


	</body>
</html>

在这里插入图片描述