vue计算属性相关实例
程序员文章站
2022-05-17 19:55:01
...
定义：
Vue.js 的内联表达式非常方便，但它最合适的使用场景是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑，你应该使用计算属性。
计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。
计算属性的setter：
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
计算属性 vs 侦听属性：
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：
<div id="demo">{{ fullName }}</div>var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})上面代码是命令式且重复的。将它与计算属性的版本进行比较：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>买日用百货请上淘宝搜索：华诚荣邦百货 </title>
</head>
<body>
<div id="app">
桃子单价：<input type="text" id="inp1" v-model="inpVal" />
<br>
桃子数量：<input type="text" id="num" v-model="sinPrice" />
<br>
<!-- 方式一 -->
桃子总价：{{getFullName()}}
<!-- 方式二 -->
桃子总价： {{add}}
<br>
桃子运费： {{yun}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
yun: 0,
inpVal: null,
sinPrice: null
},
//计算属性
computed: {
add(){
if(this.inpVal * this.sinPrice >= 80){
this.yun = 0;
}else{
this.yun = 10;
}
return this.inpVal * this.sinPrice + this.yun;
},
},
methods: {
getFullName() {
return this.inpVal * this.sinPrice + this.yun;
}
}
})
</script>
</html>
总结
参考：
上一篇： vue3 api 理解
下一篇： vue3新特性及api介绍（二）