vue2.0学习笔记 ——watch

最新推荐文章于 2025-04-17 14:36:04 发布

qq_19318067

最新推荐文章于 2025-04-17 14:36:04 发布

阅读量565

点赞数

CC 4.0 BY-SA版权

分类专栏： vue2.0 文章标签： vue2.0

本文链接：https://blog.youkuaiyun.com/qq_19318067/article/details/71081598

vue2.0 专栏收录该内容

10 篇文章

订阅专栏

本文通过一个具体的Vue.js应用示例，展示了如何使用Watch选项来监控数据变化，并实现业务逻辑，例如购买商品的数量变化限制等。文章深入浅出地介绍了Watch的内部工作原理及其实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项 watch 监控 22</title>
<link type="text/css" rel="stylesheet" href="../assets/css/index.css" />
<script src="../assets/js/vue.js"></script>
</head>

<body>
<h1>选项 watch 监控一些数据的变化</h1>
<hr />
<div id="app">
<p>苹果</p>
<p>购买数量：{{n}}</p>
<p>一个价钱：{{prize}}</p>
<p>总价:{{xianjia}}</p>
<p>
<button @click='jian'>-</button>
<button @click='jia'>+</button>
</p>

</div>

<script>
var vm = new Vue({
el:'#app',
data:{
n:1,
prize:30
},
computed:{
xianjia:function(){
return this.n * this.prize
}
},
methods:{
jia:function(){
this.n++;
},
jian:function(){
this.n--;
}
},
watch:{ //watch可以内置也可以外置
/*n:function(newVal,oldVal){
console.log('我是新改变数据'+newVal);
console.log('我是老的数据'+oldVal);
if(newVal<1){
this.n = 1; //买商品不能为负数在这里进行处理
}
} */
}
});
//在外部引用的叫做实例属性促销这里可以写成一个js 就像前端的模块化加载一样
vm.$watch('n',function(newVal,oldVal){
if(newVal<1){
console.log('我是新改变数据'+newVal);
console.log('我是老的数据'+oldVal);
vm.n = 1; //买商品不能为负数在这里进行处理
}
},{immediate:true});//vm.$watch('n','函数','immediate:true')里面可以传三个值
</script>
<script src="./webpack.js"></script>
</body>
</html>