Vue中的计算属性computed

最新推荐文章于 2024-06-12 12:46:24 发布

原创最新推荐文章于 2024-06-12 12:46:24 发布 · 356 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #vue #vue.js

vue 专栏收录该内容

17 篇文章

订阅专栏

本文深入解析Vue中的计算属性，探讨其如何简化模板表达式的复杂逻辑，实现数据的双向绑定，并通过具体示例展示计算属性的get和set方法的使用。

1. 什么是计算属性

为什么vue中存在计算属性computed。通过对计算属性的使用，我们可以将原本在模板表达式中的复杂逻辑转移到计算属性中去，避免模板表达式过于臃肿而难以维护。计算属性中可以完成的复杂逻辑既可以是运算也可以是函数调用，最后返回一个最终的计算结果即可。
具体的定义方式就是computed作为vue实例化对象中的一个option，不同的复杂业务逻辑则在computed下定义具体的方法。即：

computed:{
	function1:function() {
	},
	function2:function() {
	},
	....
}

具体的使用方式是在视图层中通过{{方法名}}

2. 计算属性的get和set方法

计算属性中对get和set方法的使用可以实现数据的双向绑定。get和set名固定，无法改变。一般使用方式为

computed:{
	变量名：{
         get:function() {
         },
         set:function(val) {
         }
    }
}

一旦变量名对应的值在脚本的某一处被修改，此时就会将新值传入set并自动调用set方法。视图层中使用{{变量名}}，则默认调用的是其对应的get方法。

3. 计算属性具体例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<head>计算属性computed的使用</head>
	</head>
	<body>
		<div id='app'></div>
		<script type='text/javascript' src='node_modules/vue/dist/vue.js'></script>
		<script type='text/javascript'>
			var vm = new Vue({
				el:'#app',
				data:function() {
					return {
						msg:'12345678',
						talent:'天赋',
						hard:'+努力',
						success:'=成功'
					}
				},
				template:`
					<div>
						<p>msg初始值：{{msg}}</p>
						<p>使用计算属性changeMsg反转msg之后的数据：{{changeMsg}}</p>
						<p>----------------------------------------------</p>
						<p>{{result}}</p>
						<button @click='modifyResult'>点我修改result</button>
					</div>
				`,
				computed:{
					changeMsg:function() {
						 return this.msg.split('').reverse().join('')
					},
					result:{
						get:function() {
							// 相当于字符串的联合没放在html中进行，为了便于维护放在了计算属性中
							return this.talent + this.hard + this.success  
						},

						// 其中substr(参数1，{参数2}) 参数1是字符串的起始位置，参数2是截取的长度，若参数2省略则直接截取到最后一位
						set:function(value) {
							this.talent = value.substr(0,2)
							this.hard = value.substr(2,2)
							this.success = value.substr(4)
						}
					}						
				},
				methods:{
					modifyResult:function() {
						this.result = '上天不会辜负努力的人'
					}
				}
			})
		</script>
	</body>
</html>