Vue计算属性
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue计算属性，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1822字，纯文字阅读大概需要3分钟。
内容图文
定义：Vue通过操作vm已有属性值，将计算得到的结果赋值给一个全新属性，这个属性就称为计算属性。
原理：底层借助Object.defineProperty()提供的getter和setter来实现。
方式：通过vm的computed属性进行定义。
优势：与methods方式相比，内部有缓存机制，效率更高。
注意：
- 计算属性的getter和setter调用时机
- 第一次读取时
- 当其依赖的属性发生变化时
- 计算属性最终会绑定在vm之上
- 如果计算属性需要提供修改功能，那么必须给它添加setter，且在set()中要同步修改所依赖的属性
- 当计算属性不需要修改时，可以不写setter，此时可以将其简写为一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div >
<div>
姓：<input type="text" v-model="lastName"><br><br>
名：<input type="text" v-model="firstName"><br><br>
<!-- 使用插值语法实现 -->
全名（插值语法）：<input v-model="lastName.slice(0,3) + ‘ - ‘ + firstName"><br><br>
<!-- 使用methods方式实现 -->
全名（methods）：<input v-model="getFullName()"/><br><br>
<!-- 使用计算属性方式实现 -->
全名（计算属性）：<input type="text" v-model="fullName"><br><br>
<!-- 使用简写的计算属性方式 -->
全名（计算属性简写方式）：<input type="text" v-model="fullName2"><br><br>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;//关闭生产提示
// 实例化Vue对象
new Vue({
el: "#root",
data: {
lastName: "张",
firstName: "三"
},
methods: {
getFullName() {
console.log("-----")
return this.lastName.slice(0, 3) + " - " + this.firstName;
}
},
computed: {
// 定义方式
fullName: {
get() {
return this.lastName.slice(0, 3) + " - " + this.firstName;
},
set(name) {
let split = name.split("-");
this.lastName = split[0].trim();
this.firstName = split[1].trim();
}
},
// 简写方式，当没有setter时可以这么写
fullName2() {
return this.lastName.slice(0, 3) + " - " + this.firstName;
}
}
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/wind-ranger/p/15144885.html
内容总结
以上是互联网集市为您收集整理的Vue计算属性全部内容，希望文章能够帮你解决Vue计算属性所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】