使用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从入门到精通(视频教学版)》,获出版社和作者授权发布。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/525947.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

20230610 1+X 中级理论考试20230916 1+X 中级理论考试

20230610 1X 中级理论考试 对分组结果进行约束使用having关键字 排序使用order by&#xff0c;倒序使用desc 删除数据的DELETE语句DELETE FROM TABLENAME ArrayList实现了List接口 ArrayList中的数据是有序的 final为常量关键字&#xff0c;修饰一个变量时表示该变量为…

QT 使用QMediaPlayer实现的简易视频播放器

文章目录 效果图功能点类介绍代码介绍总结 QT 使用QMediaPlayer实现的简易视频播放器 效果图 功能点 播放指定视频全屏/退出全屏开始/暂停/重置视频拖拽到指定位置播放 类介绍 需要在配置文件中加入Multimedia, MultimediaWidgets这俩个库。Multimedia&#xff1a;提供了一套…

演示python连接数据库

先准备好数据库的配置&#xff0c; 域名&#xff0c;端口号&#xff0c;用户&#xff0c;密码&#xff0c;数据库名称。安装好【pymysql】库。 注意这里的db里&#xff0c;输入 数据库的分库名称&#xff0c;不是输数据库的名称 # 导包 import pymysql# # 连接到MySQL数据库 …

Jackson 2.x 系列【15】序列化器 JsonSerializer

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-jaskson-demo 文章目录 1. 概述2. 方法2.1 构造2.2 序列化2.3 其他 3. 实现类3.1 StdSerializer3.1.1 源…

说说TCP为什么需要三次握手和四次挥手?

一、三次握手 三次握手&#xff08;Three-way Handshake&#xff09;其实就是指建立一个TCP连接时&#xff0c;需要客户端和服务器总共发送3个包 主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备 过程如下&#xff…

12 | 排序(下):如何用快排思想在O(n)内查找第K大元素?归并排序和快速排序

 下载APP  12 | 排序&#xff08;下&#xff09;&#xff1a;如何用快排思想在O(n)内查找第K大元素&#xff1f; 2018-10-17 王争数据结构与算法之美进入课程 讲述&#xff1a;修阳 时长21:58大小8.81M  上一节我讲了冒泡排序、插入排序、选择排序这三种排序算法&…

Linux系统软件安装

实战&#xff1a;在Linux上部署各类软件 MySQL数据库管理系统安装部署【简单】 简介 MySQL数据库管理系统&#xff08;后续简称MySQL&#xff09;&#xff0c;是一款知名的数据库系统&#xff0c;其特点是&#xff1a;轻量、简单、功能丰富。 MySQL数据库可谓是软件行业的明…

数据库不用mmap

你确定你想用 MMAP 实现数据库么&#xff1f;_哔哩哔哩_bilibili MMAP 的随机读与顺序读的性能表现不好&#xff0c;以及对于写主要是不可控的刷入时机以及代码冗余&#xff0c;所以 MMAP 不适合在数据库中使用。 mmap是posix系统调用&#xff0c;它提供由操作系统管理内存映…

el-date-picker禁用指定范围的日期

elementUI中el-date-picker禁用指定日期之前或之后的日期 通过配置picker-options配置指定禁用日期&#xff08;pickerOptions写到data里面&#xff09; <el-date-pickerv-model"date"type"date"size"small"value-format"yyyy-MM-dd&qu…

怎么显示文件后缀名?这4个策略很赞!

“在查看文件时&#xff0c;我总是无法看到文件的后缀名&#xff0c;有时候我都分辨不出它是什么文件&#xff0c;有朋友知道怎么显示文件后缀名吗&#xff1f;” 在日常使用电脑的过程中&#xff0c;文件后缀名扮演着重要的角色&#xff0c;它可以帮助我们识别文件的类型&…

C——找单身狗2

题目内容&#xff1a; 在一个数组中&#xff0c;室友两个数字出现了一次&#xff0c;其他所有数字都出现了两次。找出只出现一次的数字。 如&#xff1a;1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;4&#xff…

【ZBrush】制作章鱼练习 01——头部

目录 本篇效果 步骤 一、准备工作 二、制作头部外形 三、制作眼睛 本篇效果 步骤 一、准备工作 我们需要制作的模型如下 首先创建一个球体 点击编辑对象 点击“生成 多边形网格物体” 选择“MatCap Gray”材质&#xff0c;颜色设置为白色 要打开“Mrgb”通道和“绘制”选…

Vue - 你知道Vue组件中的data为什么是一个函数吗

难度级别:中高级及以上 提问概率:80% 在Vue项目中,App.vue下的每个子组件都会生成一个单独的Vue实例对象,但这些子对象都是通过通过vue.extend方法创建而来的,也就是说我们平时在项目中所定义的Vue组件,都有一个相同的父类对象。这样也就…

CSS 基础:设置背景的 5 个属性及简写 background 注意点

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生&#xff0c;一枚程序媛&#xff0c;感谢关注。回复 “前端基础题”&#xff0c;可免费获得前端基础 100 题汇总&#xff0c;回复 “前端工具”&#xff0c;可获取 Web 开发工具合集 263篇…

实时计算平台设计方案:911-基于6U VPX的光纤图像DSP实时计算平台

基于6U VPX的光纤图像DSP实时计算平台 一、系统组成 该平台基于风冷式的 6U 6槽VPX图像处理平台&#xff0c;包括&#xff1a;计算机主板、计算机主板后板、存储板、图像信号处理板、图像信号处理板后板、图像光纤转接板、机箱背板及机箱组成。图1为系统背板结构示意图&…

TechTool Pro for Mac v19.0.3中文激活版 硬件监测和系统维护工具

TechTool Pro for Mac是一款专为Mac用户设计的强大系统维护和故障排除工具。它凭借全面的功能、高效的性能以及友好的操作界面&#xff0c;赢得了广大用户的信赖和好评。 软件下载&#xff1a;TechTool Pro for Mac v19.0.3中文激活版 作为一款专业的磁盘和系统维护工具&#x…

第八讲 Sort Aggregate 算法

我们现在将讨论如何使用迄今为止讨论过的 DBMS 组件来执行查询。 1 查询计划【Query Plan】 我们首先来看当一个查询【Query】被解析【Parsed】后会发生什么&#xff1f; 当 SQL 查询被提供给数据库执行引擎&#xff0c;它将通过语法解析器进行检查&#xff0c;然后它会被转换…

VueRouter的介绍:什么是路由呢?VueRouter的作用及使用,VueRouter的使用分为5个步骤和特定的2步

1.什么是路由呢&#xff1f; 路由就是路径和组件之间的映射关系&#xff0c;当我们路径变化的时候&#xff0c;就要切换对应的组件。 在前端中解决路径与组件之间的映射关系&#xff0c;官方提供了VueRouter这个插件 2.VueRouter的作用及使用 作用&#xff1a;修改地址栏路…

基于单片机手机屏蔽器系统仿真设计

**单片机设计介绍&#xff0c;基于单片机手机屏蔽器系统仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机手机屏蔽器系统的仿真设计主要涉及到手机信号屏蔽的原理、单片机控制逻辑设计、仿真软件的选择与使用以…

太厉害了,不愧是字节出来的。

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 前段时间公司缺人&#xff0c;也面了许多测试&#xff0c;一开始瞄准的就是中级水准&#xff0c…