vue2之计算属性和监听属性代码

最新推荐文章于 2024-07-25 09:37:37 发布

默默努力的小老弟

最新推荐文章于 2024-07-25 09:37:37 发布

阅读量73

点赞数

文章标签： vue.js 前端 html5

本文链接：https://blog.csdn.net/weixin_47039303/article/details/121443209

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		{{price}}
		{{changePrice}}
		<button @click="changeData">改变数据</button>
	</div>


<script src="js/vue.js"></script>
	<script type="text/javascript">
			var vm=new Vue({
				el :"#app",
				data:{price:10},
				computed:{
						changePrice(){
							return this.price*0.8;
						}

				},
				watch:{
					price(pre,after){
						console.log("price has been changed");
						//我不让你修改
						this.price=10;
					}
				},
				methods:{
					changeData(){
						this.price=998

					}

				}


			});

	</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

默默努力的小老弟

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2之计算属性和监听属性代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> {{price}} {{changePrice}} <button @click="changeData">改变数据</button&
复制链接

扫一扫