谷粒商城实战笔记-40-前端基础-Vue-计算属性、监听器、过滤器

news2024/11/12 17:30:07

文章目录

  • 一,计算属性
    • 1,用途
    • 2,用法
      • 2.1 定义View
      • 2.2 声明计算属性
    • 3,注意事项
  • 二,监听器
    • 1. 使用 `watch` 监听属性的变化
  • 三,过滤器
    • 1,定义局部过滤器
    • 2,定义全局过滤器
    • 3,使用过滤器
    • 4,过滤器参数
    • 5,链式过滤器

本节的主要内容是学习Vue的三个特性的使用:

  • 计算属性
  • 监听器
  • 过滤器

一,计算属性

计算属性(Computed Properties)是其中非常强大的一个特性:

  • 基于依赖的数据进行运算并缓存结果
  • 依赖的数据发生变化时会触发重新计算。

相当于模板中的复杂表达式,计算属性要更高效、更可读。

1,用途

数据处理:可以对原始数据进行转换或组合,比如将多个数据源合并成一个。
性能优化:只有当它的相关依赖发生改变时,计算属性才会重新求值。这避免了不必要的计算。
代码清晰:将逻辑放在计算属性中可以使模板保持干净,提高代码的可读性和可维护性。

2,用法

2.1 定义View

下面是一个简单的例子来说明如何使用计算属性。

这是一个简单图书购物车界面。用户可以看到两本书的信息——《西游记》和《水浒传》,每本书都有其单价和数量输入框。总价会根据用户选择的书的数量和单价实时更新。

    <div id="app">
        <!-- 某些结果是基于之前数据实时计算出来的,我们可以利用计算属性。来完成 -->
        <ul>
            <li>西游记; 价格:{{xyjPrice}},数量:<input type="number" v-model="xyjNum"> </li>
            <li>水浒传; 价格:{{shzPrice}},数量:<input type="number" v-model="shzNum"> </li>
            <li>总价:{{totalPrice}}</li>
            {{msg}}
        </ul>
    </div>

2.2 声明计算属性

总价totalPrice的计算非常适合使用计算属性来实现。

     new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.00,
                xyjNum: 1,
                shzNum: 1,
                msg: ""
            },
            computed: {
                totalPrice(){
                    return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
                }
            }
        })

如上JS代码,总价totalPrice定义在Vue对象的computed属性下。

效果如下。

在这里插入图片描述

3,注意事项

  • 计算属性内部可以通过 this 访问 Vue 实例以及其它数据属性。
  • 如果计算属性的函数过于复杂,考虑使用方法(methods)代替,因为计算属性的缓存机制可能使得调试变得困难。
  • 计算属性也可以声明为只读的,通过添加 getter/setter 的形式来实现。

二,监听器

监听器(Watcher)是框架内部用于响应数据变化的核心机制之一。不过,在 Vue 开发中,我们通常不会直接操作 Watcher 类,而是使用更高级的 API 如 watch 或者在组件选项中定义的 watch 属性来实现侦听器的功能。

下面基于前面的图书购物车为例说明监听器的用法,假设西游记图书的库存只有3本,则当用户输入的数字大于3时,就要提示库存不足。此时就需要监听用户的输入。

1. 使用 watch 监听属性的变化

在 Vue 组件中,使用 watch 属性来监听某个数据属性的变化,并执行相应的函数。

        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.00,
                xyjNum: 1,
                shzNum: 1,
                msg: ""
            },
            computed: {
                totalPrice(){
                    return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
                }
            },
            //watch监控一个值的变化。从而做出相应的反应。
            watch: {
                xyjNum(newVal,oldVal){
                    if(newVal>3){
                        alert("库存超出限制");
                        this.xyjNum = 3
                    }
                }
            },
        })

在这个例子中,每当 xyjNum 的值发生变化时,watch 中定义的函数就会被调用,超过库存则弹窗提示。

注意watch中的函数对象名称,必须和要监听的属性名一致,如watch中的xyjNum和input的属性xyjNum保持一致。

在这里插入图片描述

三,过滤器

过滤器主要用于格式化数据显示,它们接收一个值作为输入并返回一个经过转换的值。过滤器可以定义为全局的或者局部的,并且可以在模板中使用。

基于如下需求学习过滤器的使用,遍历展示model中的用户列表信息,展示时将代表性别的枚举值转换为字符展示,这个转换的过程就可以使用过滤器

最终效果如下。
在这里插入图片描述

模板View。

	<!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 -->
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
            </li>
        </ul>
    </div>

model中的用户列表数据。

		   data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            }

1,定义局部过滤器

局部过滤器只在当前 Vue 实例中可用,定义在Vue对象的 filters 属性中。

	  let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
            filters: {
                // filters 定义局部过滤器,只可以在当前vue实例中使用
                genderFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })

2,定义全局过滤器

全局过滤器可以在任何 Vue 组件中使用。定义全局过滤器的方式是在 Vue 实例创建之前使用 Vue.filter() 方法。

Vue.filter("gFilter", function (val) {
   if (val == 1) {
       return "男~~~";
   } else {
       return "女~~~";
   }
})

3,使用过滤器

在模板中,过滤器通过管道符 | 应用于表达式。

	<div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
            </li>
        </ul>
    </div>

4,过滤器参数

过滤器可以接受额外的参数。
,

Vue.filter('padNumber', function (value, totalLength) {
  var str = '' + value;
  while (str.length < totalLength) {
    str = '0' + str;
  }
  return str;
});

使用参数

<!-- 使用过滤器参数 -->
<p>{{ 42 | padNumber(4) }}</p>
<!-- 结果将是 "0042" -->

5,链式过滤器

多个过滤器可以串联使用。

示例代码

<p>{{ "hello world" | toUppercase | reverseString }}</p>

这里假设 toUppercase 是另一个定义好的过滤器,上面的代码会先将字符串转为大写,然后再反转字符串。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

level 6 day2-3 网络基础2---TCP编程

1.socket&#xff08;三种套接字&#xff1a;认真看&#xff09; 套接字就是在这个应用空间和内核空间的一个接口&#xff0c;如下图 原始套接字可以从应用层直接访问到网络层&#xff0c;跳过了传输层&#xff0c;比如在ubtan里面直接ping 一个ip地址,他没有经过TCP或者UDP的数…

如何修复 CrowdStrike 蓝屏错误 Windows 11

如果您的 PC 出现 BSoD 错误&#xff0c;您不是唯一一个&#xff0c;但这里有一个解决方法来缓解该问题。 如果您有一台运行 Windows 11&#xff08;或 10&#xff09;的计算机使用 CrowdStrike 的 Falcon Sensor 应用程序连接到组织&#xff0c;并且遇到蓝屏死机 &#xff0…

JavaScript:节流与防抖

目录 一、前言 二、节流&#xff08;Throttle&#xff09; 1、定义 2、使用场景 3、实现原理 4、代码示例 5、封装节流函数 三、防抖&#xff08;Debounce&#xff09; 1、定义 2、使用场景 3、实现原理 4、代码示例 5、封装防抖函数 四、异同点总结 一、前言 …

AI算法22-决策树算法Decision Tree | DT

目录 决策树算法概述 决策树算法背景 决策树算法简介 决策树算法核心思想 决策树算法的工作过程 特征选择 信息增益 信息增益比 决策树的生成 ID3算法 C4.5的生成算法 决策树的修剪 算法步骤 决策树算法的代码实现 决策树算法的优缺点 优点 缺点 决策树算法的…

深入解析HNSW:Faiss中的层次化可导航小世界图

层次化可导航小世界&#xff08;HNSW&#xff09;图是向量相似性搜索中表现最佳的索引之一。HNSW 技术以其超级快速的搜索速度和出色的召回率&#xff0c;在近似最近邻&#xff08;ANN&#xff09;搜索中表现卓越。尽管 HNSW 是近似最近邻搜索中强大且受欢迎的算法&#xff0c;…

Latex使用心得1

本周暑期课程大作业需要使用Latex模板&#xff0c;采用的是老师给的IEEE的格式。从最开始不知道Latex是什么&#xff0c;到摸索着把大作业的小论文排版完成&#xff0c;其中也有一些心得体会。写在这里记录一下&#xff0c;以便以后回来再看&#xff0c;有更多的思考沉淀。 1、…

视觉巡线小车——STM32+OpenMV(三)

目录 前言 一、OpenMV代码 二、STM32端接收数据 1.配置串口 2.接收数据并解析 总结 前言 通过视觉巡线小车——STM32OpenMV&#xff08;二&#xff09;&#xff0c;已基本实现了减速电机的速度闭环控制。要使小车能够自主巡线&#xff0c;除了能够精准的控制速度之外&#xff0…

Java周总结7.20day

一&#xff0c;异常 异常 &#xff1a;指的是程序在运行过程中报错&#xff0c;然后停止运行&#xff0c;控制台显示错误。 注意事项&#xff1a;异常本身是一个类&#xff0c;出现异常会创建一个异常类的对象并抛出&#xff0c; public class DemoTest { public static void …

python—爬虫爬取电影页面实例

下面是一个简单的爬虫实例&#xff0c;使用Python的requests库来发送HTTP请求&#xff0c;并使用lxml库来解析HTML页面内容。这个爬虫的目标是抓取一个电影网站&#xff0c;并提取每部电影的主义部分。 首先&#xff0c;确保你已经安装了requests和lxml库。如果没有安装&#x…

海思arm-hisiv400-linux-gcc 交叉编译rsyslog 记录心得

需要编译rsyslog,参考海思3536平台上rsyslog交叉编译、使用-CSDN博客和rsyslog移植&#xff08;亲测成功&#xff09;_rsyslog交叉编译-CSDN博客 首先下载了要用到的一些库的源码&#xff0c;先交叉编译这些库 原来是在centos6上交叉编译的&#xff0c;结果编译时报缺少软件要…

使用vue3模拟element-ui中el-tabs的实现

一. 最终实现 组件没有背景颜色, 为了凸显组件文字,才设置了背景颜色 二. 使用 <wq-tabs v-model"activeName" style"background:grey; padding: 20px"><wq-tab-pane label"User" name"first">User</wq-tab-pane&g…

多任务高斯过程数学原理和Pytorch实现示例

高斯过程其在回归任务中的应用我们都很熟悉了&#xff0c;但是我们一般介绍的都是针对单个任务的&#xff0c;也就是单个输出。本文我们将讨论扩展到多任务gp&#xff0c;强调它们的好处和实际实现。 本文将介绍如何通过共区域化的内在模型(ICM)和共区域化的线性模型(LMC)&…

驱动LSM6DS3TR-C实现高效运动检测与数据采集(10)----融合磁力计进行姿态解算

驱动LSM6DS3TR-C实现高效运动检测与数据采集.10--融合磁力计进行姿态解算 概述视频教学样品申请源码下载硬件准备DataLogFusion磁力计校准过程初始化磁力计MFX_Arithmetic_Init卡尔曼滤波算法演示 概述 MotionFX库包含用于校准陀螺仪、加速度计和磁力计传感器的例程。 将磁力计…

【网络】windows和linux互通收发

windows和linux互通收发 一、windows的udp客户端代码1、代码剖析2、总体代码 二、linux服务器代码三、成果展示 一、windows的udp客户端代码 1、代码剖析 首先我们需要包含头文件以及lib的一个库&#xff1a; #include <iostream> #include <WinSock2.h> #inclu…

swiftui中onChange函数的使用,监听变量的变化

在 SwiftUI 中&#xff0c;onChange 修饰符用于在指定值发生变化时执行某些操作。它允许你监听一个状态或绑定值的变化&#xff0c;并在变化发生时运行一些代码。这个功能非常适合需要对状态变化做出响应的场景。 使用示例&#xff1a; struct AppStorageTest: View {State p…

友力科技数据中心搬迁方案

将当前运行机房中的所有设备、应用系统安全搬迁至新数据中心机房&#xff0c;实现平滑切换、平稳过渡&#xff0c;最大限度地降低搬迁工作对业务的影响。 为了确保企事业单位能够顺利完成数据中心机房搬迁工作&#xff0c;我们根据实际经验提供了4个基本原则&#xff0c;希望能…

【Linux】编辑器vscode与linux的联动

1.vscode简单学习 vscode是编辑器&#xff0c;可以写各种语言的程序 下载链接&#xff1a;Download Visual Studio Code - Mac, Linux, Windows 来用一下vscode 我们保存了就能在我们的那个文件夹里面看到这个 这个就是编辑器&#xff0c;跟我们的文本文件好像差不多&#…

RPM、YUM 安装 xtrabackup 8 (mysql 热备系列一)包含rpm安装 mysql 8 配置主从

RPM安装 percona-xtrabackup-80-8.0.35-30.1.el7.x86_64.rpm 官网&#xff1a; https://www.percona.com/ 下载地址&#xff1a; https://www.percona.com/downloads wget https://downloads.percona.com/downloads/percona-distribution-mysql-ps/percona-distribution-mysq…

51单片机14(独立按键实验)

一、按键介绍 1、按键是一种电子开关&#xff0c;使用的时候&#xff0c;只要轻轻的按下我们的这个按钮&#xff0c;按钮就可以使这个开关导通。 2、当松开这个手的时候&#xff0c;我们的这个开关&#xff0c;就断开开发板上使用的这个按键&#xff0c;它的内部结构&#xff…

从千台到十万台,浪潮信息InManage V7解锁智能运维密码

随着大模型技术的深度渗透&#xff0c;金融行业正经历着前所未有的智能化变革。从“投顾助手”精准导航投资蓝海&#xff0c;到“智能客服”秒速响应客户需求&#xff0c;大模型以其对海量金融数据的深度挖掘与高效利用&#xff0c;正显著提升金融服务的智能化水准&#xff0c;…