使用Vue3组件的计算属性

计算属性在Vue.js的computed选项中定义,它可以在模板上进行双向数据绑定以展示出结果或者进行其他处理。

通常用户会在模板中定义表达式,非常便利,Vue.js的设计初衷也是用于简单运算。但是在模板中放入太多的逻辑,会让模板变得臃肿且难以维护。例如:

<div id="app">

{{message.split('').reverse().join('')}}

</div>

上面的插值语法中的表达式调用了3个方法来实现字符串的反转,逻辑过于复杂,如果在模板中还要多次使用此处的表达式,就更加难以维护了,此时应该使用计算属性。

计算属性比较适合对多个变量或者对象进行处理后返回一个结果值,也就是说多个变量中的某一个值发生了变化,则绑定的计算属性也会发生变化。

下面是完整的字符串反转的示例,定义一个reversedMessage计算属性,在input输入框中输入字符串时,绑定的message属性值发生变化,触发reversedMessage计算属性,执行对应的函数,最终使字符串反转。
【例3.5】 使用计算属性(源代码\ch03\3.1.html)。

复制代码
<div id="app">
    原始字符串:<input type="text" v-model="message"><br/>
    反转后的字符串:{{reversedMessage}}
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             message: '海角逢春,天涯为客。'
           }
        },
        computed: {
            //计算属性的getter
            reversedMessage(){
                return this.message.split('').reverse().join('');
            }
        }
    //在指定的DOM元素上装载应用程序实例的根组件
    }).mount('#app');
</script>

在Chrome浏览器中运行程序,输入框下面会显示对象的反转内容,效果如图3-5所示。

在上面的示例中,当message属性的值发生改变时,reversedMessage的值也会自动更新,并且会自动同步更新DOM部分。

在浏览器的控制台中修改message的值,按回车键执行代码,可以发现reversedMessage的值也发生了改变,如图3-6所示。

本文节选自《Vue.js 3.x+Element Plus从入门到精通(视频教学版)》,获出版社和作者授权发布。

相关推荐
Zender Han3 小时前
Flutter 实现人脸检测 — 使用 google_mlkit_face_detection
android·flutter·ios
西西学代码3 小时前
Flutter---默认程序(计数器)
flutter
君逸臣劳3 小时前
玩Android Flutter版本,通过项目了解Flutter项目快速搭建开发
android·flutter
_大学牲9 小时前
Flutter 之魂 GetX🔥(二)全面解析路由管理
前端·flutter
恋猫de小郭10 小时前
Flutter 在 iOS 26 模拟器跑不起来?其实很简单
android·前端·flutter
大雷神1 天前
Flutter鸿蒙开发
flutter·华为·harmonyos
shelutai1 天前
实现提供了完整的 Flutter Web 文件上传解决方案
前端·flutter
小仙女喂得猪1 天前
2025 Android原生开发者角度的Flutter 笔记整理(对比ReactNative)
android·flutter·react native
猪哥帅过吴彦祖1 天前
Flutter 系列教程:列表与网格 - `ListView` 和 `GridView`
前端·flutter·ios
程序员老刘2 天前
为什么我从不推荐GetX?11k星标背后的真相
flutter·客户端