计算属性
setter与getter
使用计算属性简化 表达式操作,实现复用,一般计算属性都是只用getter的,一般不适用setter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{firstName + ' ' + lastName}}</div>
<!-- 简化写法,复用,不用每次都写拼接 -->
<div>{{fullName}}</div>
<!-- 执行方法设置 fullName-->
{{setFullName()}}
</div>
</body>
<script>
// 创建vue
const vue = new Vue({
el: '#app',
data: {
firstName: 'Mr',
lastName: 'zhang'
},
methods:{
setFullName(){
this.fullName = 'Mr li'
}
},
// 计算属性
computed: {
// 虚拟字段
fullName: {
// 获取方法
get() {
return this.firstName + ' ' + this.lastName
},
// 设置方法
set(value){
if(undefined != value && null != value){
let fullName = value.split(" ");
this.firstName = fullName[0];
this.lastName = fullName[1];
}
}
}
}
})
</script>
</html>
运行结果
计算属性对比函数
- 可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
- 可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
作者：彼岸舞
时间：2021 531
内容关于：VUE
本文属于作者原创,未经允许,禁止转发