欢迎来到“雪碧聊技术”CSDN博客！
在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。
让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！
目录
②计算属性中，也需要get、set方法（Object.defineProperty中讲过），并且this代表vue实例，即vm。
④一般不在计算属性中写set方法，因为很少直接去修改计算属性；而常常要写get方法，因为经常要访问计算属性。
一、计算属性
1、计算属性是什么？
根据vue实例的data中的已有属性，加工、计算出一个全新的属性。
2、举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓：<input type="text" v-model="firstName"> <br>
名：<input type="text" v-model="lastName"> <br>
全名：<span>{{fullName}}</span>
</div>
<script type="text/javascript">
//新创建一个vue实例（这是使用vue的第一步）
const vm = new Vue({
el:'#root', //el就是element（元素）的意思，用于将该vue实例与容器进行绑定
data:{
firstName:'张',
lastName:'三'
},
computed:{
fullName:{
//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
//get什么时候调用？1、初次读取fullName时。2、所依赖的数据发生变化时。
get() {
//此时this指的是vue实例，即：vm (这是vue帮我们调好的，我们理解即可)
return this.firstName + '-' + this.lastName
},
//set什么时候调用？当fullName被修改时。
set(value){
//形参value是修改后的值
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
</body>
</html>运行结果：
3、解读上述代码
①计算属性要写在computed后面的对象中
举例：
②计算属性中，也需要get、set方法（Object.defineProperty中讲过），并且this代表vue实例，即vm。
举例：
③计算属性，也会被数据代理，成为vue实例的属性
举例：
④一般不在计算属性中写set方法，因为很少直接去修改计算属性；而常常要写get方法，因为经常要访问计算属性。
4、总结
二、简写计算属性
1、什么场景下，能简写计算属性？
如果我们确保以后，只读、不改 计算属性的话，那么就能简写计算属性。
2、如何简写计算属性？
直接写get方法中的代码。
以上就是vue的计算属性的全部内容，想了解更多的vue知识，请关注本博主
标签：vue,get,实例,计算,简写,属性 From： https://blog.csdn.net/qq_63981644/article/details/144198652