Vue.js计算属性

计算属性关键词:computed

计算属性在处理一些复杂逻辑时是很有用的。

示例1:

<div id="app">
       {{message.split('').reverse().join('')}}
</div>

以上代码中模板变的很复杂起来,也不容易看懂理解

示例2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		  <p>初始字符串: {{ message }}</p>
		  <p>反转字符串: {{ reversedMessage }}</p>
		</div>
		 
		<script>
		var vm = new Vue({
		  el: '#app',
		  data: {
		    message: 'Runoob!'
		  },
		  computed: {
		    // 计算属性的 getter
		    reversedMessage: function () {
		      // `this` 指向 vm 实例
		      return this.message.split('').reverse().join('')
		    }
		  }
		})
		</script>
	</body>
</html>

第二个例子中声明了一个计算属性reversedMessage

vm.reversedMessage 与 vm.message相关联,在 vm.message 发生改变vm.reversedMessage也会更新。

 computed vs methods

我们可以使用methods来代替computed,效果上它们都是一样的,都是computed是基于它的依赖缓存,只有相关依赖发生改变时才会重新赋值。而使用methods,在重新渲染的时候,函数总会重新调用执行。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="new.vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>你的firstName:{{firstName}}</p>
			<p>你的lastName:{{lastName}}</p>
			<p>你的fullName是从计算属性中得到的:{{fullName}}</p>
			<p>你的fullName是从计算属性中得到的:{{getFullName()}}</p>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						firstName:'张',
						lastName:'三'
					}
				},
				methods:{
					getFullName(){
						return this.firstName + this.lastName
					}
				},
				computed:{
					fullName(){
						return this.firstName + this.lastName
					}
				}
			})
		</script>
	</body>
</html>

 运行显示效果:

getter和setter

1. getter

通过getter我们可以获取对象中相关属性的值。我们可以理解为我们是定义了一个伪属性,我们读取这个伪属性的值时,它会按照我们定义好的规则返回对象的相关属性的值。

2. setter

通过setter我们可以修改对象中的相关属性,同样我们也可以理解为我们定义了一个伪属性,当我们修改这个伪属性的值时,它会按照我们定义好的规则修改对象的相关属性。

computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="firstName" />
			<input type="text" v-model="lastName" />
			<input type="text" v-model="fullName" />
			<!-- v-model实现数据的双向绑定 -->
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						firstName: 'zhang',
						lastName: 'san'
					}
				},
				computed: { //计算属性 一定要有一个返回值 在页面中渲染时是不需要加小括号的
					/* fullName(){
						return this.firstName + this.lastName
					} */

					fullName: {
						get: function() {
							return this.firstName + ',' + this.lastName
						},
						set: function(val) {
							var list = val.split(',')
							console.log(list);
							this.firstName = list[0]
							this.lastName = list[1]
						}
					}
				}
			})
		</script>
	</body>
</html>

运行显示效果:

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值