计算属性和监听属性

最新推荐文章于 2024-08-22 13:41:17 发布

m0_47761892

最新推荐文章于 2024-08-22 13:41:17 发布

阅读量163

点赞数

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

本文链接：https://blog.csdn.net/m0_47761892/article/details/128777799

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

计算属性和监听属性

1.计算属性
计算属性定义在computed选项中，当计算属性依赖的数据发生变化时，这个属性的值会自动更新。计算属性默认是只读的，建议不要修改计算属性。
当你尝试修改一个计算属性时，可以通过同时提供 getter 和 setter 来创建，参考官方文档。
2.计算属性缓存 vs 方法
若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。
3.监听属性
监听属性定义在watch选项中，当监听的属性发生变化时，都会执行特定的操作。
如果要监听的属性值是一个对象，为了监听对象内部的变化，可以在选项参数中设置deep选项的值为true。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性和监听属性</title>
		<script src="js/v2.6.10/vue.js" type="text/javascript">	</script>
		<style type="text/css">
			span{
				display:inline-block;
				 min-width: 80px;}
		</style>
	</head>
	<body>
		<div id="app">
			<input v-model="str"/><br>
			源字符串：{{str}}<br>
			计算属性新字符串：{{newstr}}<br>
			监听属性新字符串:{{fullstr}}<br>
			<div>
				<span> 序号</span>
				<span >名称</span>
				<span >单价</span>
				<span >数量</span>
				<span>金额</span>
			</div>
			<div v-for="(item,index) in shop">
				<span> {{index+1}}.</span>
				<span >{{item.name}}</span>
				<span >{{item.price|twodecimal}}</span>
				<span >{{item.count}}</span>
				<span>{{item.price*item.count|twodecimal}}</span>
			</div>
			<div>总价格：{{totalprice |twodecimal|formatprice('￥')}}</div>
		</div>
		<script>
			var demo=new Vue({
				el:'#app',
				data:{
					str:'zhangsan*java*html',
					fullstr:'',
					insurance:1000,
					threshold:5000,
					tax:0.03,
					shop:[
						{name:'oppo',price:2999,count:3},
						{name:'iphone',price:5999,count:5}
					],
					staff:[{name:'张无忌',income:6600},
							{name:'令狐村',income:8000},
							{name:'韦小宝',income:7000},
					]
				},
				filters:{
					twodecimal(value){
						return value.toFixed(2)
					},
					formatprice(value,para1){
						return para1+value
					}
				},
				computed:{
					totalprice(){
						var total=0;
						this.shop.forEach(function(el){
							total+=el.price*el.count
						})
						return total
					},
					newstr(){
						return this.str.split('*').join('+++')
					}
				},
				watch:{
					str(){
						this.fullstr= this.str.split('*').join('+++')
						deep:true
					}
				}
				
			})
			Vue.config.devtools=true;
		</script>
	</body>
</html>