Vue侦听器笔记

最新推荐文章于 2024-07-25 11:00:49 发布

weixin_42577503

最新推荐文章于 2024-07-25 11:00:49 发布

阅读量107

点赞数

分类专栏： HTML 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42577503/article/details/127217821

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- --html -->
		<div id="app">
			<h1>单价:{{price}}</h1>
			<h1>
				数量:<button type="button" @click="count--">-</button>
				<input type="text" v-model="count">
				<button type="button" @click="count++">+</button>
			</h1>
			<h1>总价:{{sumprice}}</h1>
			
			
			<h1>DEMO2</h1>
			<div>
				<div>
					name:<input type="text" v-model="caseinfo.name" /><br>
					aa:<input type="text" v-model="caseinfo.params.aa" /><br>
					bb:<input type="text" v-model="caseinfo.params.bb" />
				</div>
			</div>
			
			
		</div>
		<!-- --js -->
		<script type="text/javascript">
			var app = Vue.createApp({
				data(){
					return {
						price :8,
						count :1,
						number:0,
						caseinfo:{
							name:'登录用例',
							title:'001',
							desc:'测试用',
							params :{
								aa:1,
								bb:2
							}
						}
					}
				},
				methods:{
					
				},
				computed:{
					//定义为方法的计算属性,不能进行双向绑定
					sumprice(){
						return this.price * this.count
					}
				},
				watch:{
				// 	count:function(value)
					count(value){
						console.log(value);
						if(value>100){
							this.count = 100
						}else if(value<0){
							this.count = 0
						}
					},
					//监听数组对象数组中的任意值
					caseinfo:{
						deep:true,
						handler(value){
							console.log(value)
						}
					},
					监听数组对象数组中的某一个值
					//'caseinfo.name':function(value)
					'caseinfo.name'(value){
						console.log(value,'abc')
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>