vue--计算属性与侦听属性

最新推荐文章于 2024-01-14 15:08:04 发布

Laohei0101

最新推荐文章于 2024-01-14 15:08:04 发布

阅读量125

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/Laohei0101/article/details/118615671

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

本文深入探讨Vue.js中的计算属性和侦听属性。计算属性用于当一个值依赖多个值时，如总价计算，而侦听属性则在某个值变化影响其他多个值时使用，例如监听数量变化更新总价。示例代码展示了如何在模板、计算属性和侦听器中应用这些概念。

摘要由CSDN通过智能技术生成

今天说说这个vue中的计算属性与侦听属性，通过简单的总结呢，可以在项目中能够更好的掌握代码，不至于一行代码看半天，哈哈哈。下面就开始了。
一、计算属性：computed:当一个值受多个值影响的时候就用计算属性
计算价格的实例

<template>
	<div>
		<p>单价：{{price}}</p>
		<p>
			<button @click="sub"> - </button>
			数量：{{quality}}
			<button @click="add"> + </button>
		</p>
		<p>折扣：{{discount}}</p>
		<p>总价：{{total}}</p>
	</div>
</template>
<script>
export default {
	data(){
		return {
			price:1,
			quality:0,
			discount:0.5,
		}
	},
computed:{
	total(){
		return this.price * this.quality * this.discount
	}
},
methods:{
		add(){
			this.quality++;
		},
		sub(){
			this.quality--
		}
	}
}
</script>

二、侦听器：watch:当一个值影响多个值的时候就用侦听属性

<template>
	<div>
		<p>单价：{{price}}</p>
		<p>
		<button @click = "sub" > - </button>
			数量：{{quality}}
		<button @click= "add"> + </button>
		</p>
		<p>折扣：{{discount}}</p>
		<p>总价：{{total}}</p>
	</div>
</template>
<script>
export default {
	data(){
		return {
			price:1,
			quality:0,
			discount:0.5
		}
},
watch:{
	//监听数量的变化来实现对总价的变化
	quality(val){  //val参数就是变化后的参数
		return this.total = this.price * val * this.discount
	}
},
methods:{
		add(){
			this.quality++;
		},
		sub(){
			this.quality--
		}
	}
}

</script>