谈谈Vue的计算属性computed
一、计算属性computed
1.1.什么是计算属性computed
1.2.复杂数据的处理-computed
⭐⭐
拼接字符串、分数是否及格、message记录一段文字,这里是用computed实现的
<div id="app">
<!-- 插值语法表达式直接进行拼接 -->
<!-- 1.拼接姓名 -->
<h2>{{fullname}}</h2>
<!-- 2.显示分数及格或不及格 -->
<h2>{{scorelevel}}</h2>
<!-- 3.反转单词 -->
<!-- reverse针对于数组,先用split转为数组,在用reverse -->
<h2>{{reversetext}}</h2>
</div>
<script src="https://www.swvq.com/lib/vue.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
// name
firstName: "kk",
lastName: "cc",
// score
score: 99,
// 文本中单词反转
message: "I love stydy Vue3",
};
},
computed: {
fullname() {
return this.firstName " " this.lastName;
},
scorelevel() {
return this.score >= 60 ? "及格" : "不及格";
},
reversetext() {
return this.message.split(" ").reverse().join(" ");
},
},
});
app.mount("#app");
当然我们用Mustache插值语法、methods也是可以完成的,但是对于复杂数据的处理,我们往往采用computed,写法更清晰,且计算属性是有缓存的
1.3.计算属性的缓存
⭐⭐
- 会基于它们的依赖关系进行缓存;
- 在数据不发生变化时,计算属性是不需要重新计算的;
- 但是如果依赖的数据发生变化,在使用时,计算属性依然会重新进行计算;
&tinsp;
所以这也是我们在复杂数据处理时更倾向于computed
-
在使用相同次数的fullName时,methods执行三次,computed执行一次,这正是由于computed计算属性会被缓存
1.4.计算属性computed的setter和getter
⭐⭐
大多数情况下,计算属性只需要一个getter方法,那么此时computed属性属性值为函数
如果想要设置计算属性的值,我们可以给计算属性设置一个setter方法
computed: {
// 语法糖
fullname() {
return this.firstname " " this.lastname;
},
// 完整写法
fullname: {
get: function () {
return this.firstname " " this.lastname;
},
set: function (value) {
const names = value.split(" ");
this.firstname = names[0];
this.lastname = names[1];
},
},
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfeabi
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01