vue基础之6：计算属性、姓名案例、简写计算属性

欢迎来到“雪碧聊技术”CSDN博客！

在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！

一、计算属性

1、计算属性是什么？

2、举例：

3、解读上述代码

①计算属性要写在computed后面的对象中

举例：

②计算属性中，也需要get、set方法（Object.defineProperty中讲过），并且this代表vue实例，即vm。

举例：

③计算属性，也会被数据代理，成为vue实例的属性

举例：

④一般不在计算属性中写set方法，因为很少直接去修改计算属性；而常常要写get方法，因为经常要访问计算属性。

4、总结

二、简写计算属性

1、什么场景下，能简写计算属性？

2、如何简写计算属性？

一、计算属性

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>

运行结果：