vue2 computed计算属性,watch侦听器

news2025/10/31 18:45:32

一、今日学习目标

1.指令补充

  1. 指令修饰符
  2. v-bind对样式增强的操作
  3. v-model应用于其他表单元素

2.computed计算属性

  1. 基础语法
  2. 计算属性vs方法
  3. 计算属性的完整写法
  4. 成绩案例

3.watch侦听器

  1. 基础写法
  2. 完整写法

二、指令修饰符

1.什么是指令修饰符？

所谓指令修饰符就是通过.指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码

2.按键修饰符

  • @keyup.enter —>当点击enter键的时候才触发

代码演示：

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h3>@keyup.enter  →  监听键盘回车事件</h3>
    <input @keyup.enter="fn" v-model="username" type="text">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: ''
      },
      methods: {
        fn (e) {
          // if (e.key === 'Enter') {
          //   console.log('键盘回车的时候触发', this.username)
          // }

          console.log('键盘回车的时候触发', this.username)
        }
      }
    })
  </script>
</body>
</html>

3.v-model修饰符

  • v-model.trim —>去除首位空格
  • v-model.number —>转数字

4.事件修饰符

  • @事件名.stop —> 阻止冒泡
  • @事件名.prevent —>阻止默认行为
  • @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为

三、v-bind对样式控制的增强-操作class

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制

1.语法：

<div> :class = "对象/数组">这是一个div</div>

2.对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

​ 适用场景：一个类名，来回切换

3.数组语法

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

使用场景:批量添加或删除类

4.代码练习

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px solid #000;
      font-size: 30px;
      margin-top: 10px;
    }

    .pink {
      background-color: pink;
    }

    .big {
      width: 300px;
      height: 300px;
    }
  </style>
</head>

<body>

  <div id="app">
    <div class="box" :class="{ pink: true, big: true }">学习vue</div>
    <div class="box" :class="['pink', 'big']">学习vue</div>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>
</body>

</html>

四、京东秒杀-tab栏切换导航高亮

1.需求：

​ 当我们点击哪个tab页签时，哪个tab页签就高亮

2.准备代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      display: flex;
      border-bottom: 2px solid #e01222;
      padding: 0 10px;
    }

    li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      list-style: none;
      text-align: center;
    }

    li a {
      display: block;
      text-decoration: none;
      font-weight: bold;
      color: #333333;
    }

    li a.active {
      background-color: #e01222;
      color: #fff;
    }
  </style>
</head>

<body>

  <div id="app">
    <ul>
      <li v-for="(item, index) in list" :key="item.id" @click="activeIndex = index">
        <a :class="{ active: index === activeIndex }" href="#">{{ item.name }}</a>
      </li>
    </ul>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        activeIndex: 2, // 记录高亮
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]
      }
    })
  </script>
</body>

</html>

五、v-bind对有样式控制的增强-操作style

1.语法

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

2.代码练习

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: rgb(187, 150, 156);
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="box" :style="{ width: '400px', height: '400px', backgroundColor: 'green' }"></div>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>
</body>

</html>

六、computed计算属性

1.概念

基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。

2.语法

  1. 声明在 computed 配置项中，一个计算属性对应一个函数
  2. 使用起来和普通属性一样使用 {{ 计算属性名}}

3.注意

  1. computed配置项和data配置项是同级的
  2. computed中的计算属性虽然是函数的写法，但他依然是个属性
  3. computed中的计算属性不能和data中的属性同名
  4. 使用computed中的计算属性和使用data中的属性是一样的用法
  5. computed中计算属性内部的this依然指向的是Vue实例

4.案例

比如我们可以使用计算属性实现下面这个业务场景

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ukG7NoX5-1692948759912)(assets/1682039327858.png)]

5.代码准备

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      border: 1px solid #000;
      text-align: center;
      width: 240px;
    }
    th,td {
      border: 1px solid #000;
    }
    h3 {
      position: relative;
    }
  </style>
</head>
<body>

  <div id="app">
    <h3>小黑的礼物清单</h3>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{ totalCount }} 个</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 1 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      },
      computed: {
        totalCount () {
          // 基于现有的数据，编写求值逻辑
          // 计算属性函数内部，可以直接通过 this 访问到 app 实例
          // console.log(this.list)

          // 需求：对 this.list 数组里面的 num 进行求和 → reduce
          let total = this.list.reduce((sum, item) => sum + item.num, 0)
          return total
        }
      }
    })
  </script>
</body>
</html>

七、computed计算属性 VS methods方法

1.computed计算属性

作用：封装了一段对于数据的处理，求得一个结果

语法：

  1. 写在computed配置项中
  2. 作为属性，直接使用
    • js中使用计算属性： this.计算属性
    • 模板中使用计算属性：{{计算属性}}

2.methods计算属性

作用：给Vue实例提供一个方法，调用以处理业务逻辑。

语法：

  1. 写在methods配置项中
  2. 作为方法调用
    • js中调用：this.方法名()
    • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

3.计算属性的优势

  1. 缓存特性（提升性能）

    计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

    依赖项变化了，会自动重新计算 → 并再次缓存

  2. methods没有缓存特性

4.总结

1.computed有缓存特性，methods没有缓存

2.当一个结果依赖其他多个值时，推荐使用计算属性

3.当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数

八、计算属性的完整写法

既然计算属性也是属性，能访问，应该也能修改了？

  1. 计算属性默认的简写，只能读取访问，不能 “修改”
  2. 如果要 “修改” → 需要写计算属性的完整写法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nRW9FYAy-1692948759913)(assets/1682041822963.png)]

完整写法代码演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input {
      width: 30px;
    }
  </style>
</head>
<body>

  <div id="app">
    姓：<input type="text" v-model="firstName"> +
    名：<input type="text" v-model="lastName"> =
    <span>{{ fullName }}</span><br><br>
    
    <button @click="changeName">改名卡</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: '刘',
        lastName: '备',
      },
      methods: {
        changeName () {
          this.fullName = '黄忠'
        }
      },
      computed: {
        // 简写 → 获取，没有配置设置的逻辑
        // fullName () {
        //   return this.firstName + this.lastName
        // }

        // 完整写法 → 获取 + 设置
        fullName: {
          // (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）
          //     会将返回值作为，求值的结果
          get () {
            return this.firstName + this.lastName
          },
          // (2) 当fullName计算属性，被修改赋值时，执行set
          //     修改的值，传递给set方法的形参
          set (value) {
            // console.log(value.slice(0, 1))          
            // console.log(value.slice(1))         
            this.firstName = value.slice(0, 1)
            this.lastName = value.slice(1)
          }
        }
      }
    })
  </script>
</body>
</html>

九、watch侦听器（监视器）

1.作用：

​ 监视数据变化，执行一些业务逻辑或异步操作

2.语法：

  1. watch同样声明在跟data同级的配置项中

  2. 简单写法： 简单类型数据直接监视

    data: { 
 words: '苹果',
 obj: {
   words: '苹果'
 }
},

watch: {
 // 该方法会在数据变化时，触发执行
 数据属性名 (newValue, oldValue) {
   一些业务逻辑 或 异步操作。 
 },
 '对象.属性名' (newValue, oldValue) {
   一些业务逻辑 或 异步操作。 
 }
}

  3. 完整写法：添加额外配置项

    watch: {// watch 完整写法
  数据属性名: {
    deep: true, // 深度监视(针对复杂类型)
    immediate: true, // 是否立刻执行一次handler
    handler (newValue) {
      console.log(newValue)
    }
  }
}

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

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

相关文章

Orchestrator介绍二 自身高可用性方案

Orchestrator介绍二 自身高可用性方案

目录 获得 HA 的方法 一 没有高可用性 &#xff08;No high availability&#xff09; 使用场景 架构组成 架构图 二 半高可用性&#xff08;Semi HA&#xff09; 三 基于共享数据库后端高可用&#xff08;HA via shared backend&#xff09; 四 基于Raft协议高可用 五…
阅读更多...
RocketMQ消息存储

RocketMQ消息存储

一、存储介质 ● 关系型数据库DB Apache下开源的另外一款MQ—ActiveMQ (默认采用的KahaDB做消息存储)可选用JDBC的方式来做消息持久化&#xff0c;通过简单的xmI配置信息即可实现JDBC消息存储。由于&#xff0c;普通关系型数据库(如Mysql)在单表数据量达到千万级别的情况下&a…
阅读更多...
C语言gets( )函数详解

C语言gets( )函数详解

1.描述 char* gets( char* str)函数&#xff1a;从标准输入&#xff08;stdin&#xff09;读取字符串&#xff0c;遇到空格不结束&#xff0c;直到遇到回车&#xff0c;将字符串存储到str指向的字符串。 2.gets( )和scanf( )的区别 gets(str)和scanf("%s",str)作用…
阅读更多...
windows中安装sqlite

windows中安装sqlite

1. 下载文件 官网下载地址&#xff1a;https://www.sqlite.org/download.html 下载sqlite-dll-win64-x64-3430000.zip和sqlite-tools-win32-x86-3430000.zip文件&#xff08;32位系统下载sqlite-dll-win32-x86-3430000.zip&#xff09;。 2. 安装过程 解压文件 解压上一步…
阅读更多...
9.oracle中sign函数

9.oracle中sign函数

在Oracle/PLSQL中, sign 函数返回一个数字的正负标志. 语法如下&#xff1a;sign( number ) number 要测试标志的数字. If number < 0, then sign returns -1. If number 0, then sign returns 0. If number > 0, then sign returns 1. 应用于: Oracle 8i, Oracle …
阅读更多...
基于CMSIS的外设/设备驱动框架

基于CMSIS的外设/设备驱动框架

先附上一张CMSIS的结构图 对于基于CMSIS的设备驱动框架开发涉及的文件有CMSIS目录下的&#xff0c;对外设驱动做了统一的驱动模型封装 /** \brief Access structure of the SPI Driver. */ typedef struct _ARM_DRIVER_SPI {ARM_DRIVER_VERSION (*GetVersion) (void)…
阅读更多...
前端需要理解的浏览器知识

前端需要理解的浏览器知识

1 浏览器架构 浏览器是多进程多线程的应用程序&#xff0c;多进程可以避免相互影响和减少连环崩溃的几率&#xff1a; 浏览器&#xff08;主&#xff09;进程&#xff1a;主要负责界⾯显示、⽤户交互、⼦进程管理、存储等功能。内部会启动多个线程分别处理不同的任务。⽹络进…
阅读更多...
【JMeter】常用线程组设置策略

【JMeter】常用线程组设置策略

目录 一、前言 二、单场景基准测试 1.介绍 2.线程组设计 3.测试结果 三、单场景并发测试 1.介绍 2.线程组设计 3.测试结果 四、单场景容量/爬坡测试 1.介绍 2.线程组设计 3.测试结果 五、混合场景容量/并发测试 1.介绍 六、稳定性测试 1.介绍 2.线程组设计 …
阅读更多...
Servlet简介

Servlet简介

一、servlet介绍 1、概念 servlet是一个运行在服务器端的小程序&#xff0c;也是一个接口&#xff0c;介绍了Java类被tomcat识别的规则。 2、servlet的创建和使用 &#xff08;1&#xff09;创建一个JavaEE项目 &#xff08;2&#xff09;定义一个类&#xff0c;实现servlet…
阅读更多...
neo4jd3拓扑节点显示为节点标签（自定义节点显示）

neo4jd3拓扑节点显示为节点标签（自定义节点显示）

需求描述&#xff1a;如下图所示&#xff0c;我的拓扑图中有需要不同类型的标签节点&#xff0c;我希望每个节点中显示的是节点的标签 在官方示例中&#xff0c;我们可以看到&#xff0c;节点里面是可以显示图标的&#xff0c;现在我们想将下面的图标换成我们自定义的内容 那…
阅读更多...
【android12-linux-5.1】【ST芯片】HAL移植后配置文件生成报错

【android12-linux-5.1】【ST芯片】HAL移植后配置文件生成报错

根据ST官方源码移植HAL源码后&#xff0c;执行readme指示中的生成配置文件指令时报错ST_HAL_ANDROID_VERSION未定义之类&#xff0c;应该是编译环境参数问题。makefile文件中是自动识别配置的&#xff0c;参数不祥就会报错&#xff0c;这里最快的解决方案是查询确定自己android…
阅读更多...
【golang】panic函数、recover函数以及defer语句

【golang】panic函数、recover函数以及defer语句

从panic被引发到程序终止运行的大致过程是什么&#xff1f; 大致过程&#xff1a; 某个函数中的某行代码有意无意地引发了一个panic。这时&#xff0c;初始的panic详情会被建立起来&#xff0c;并且该程序的控制权会立即从从行代码转移至调用其所属函数的那行代码上&#xff…
阅读更多...
ICT产教融合创新实训基地物联网实训室建设方案

ICT产教融合创新实训基地物联网实训室建设方案

一、概述 1.1物联网定义 物联网工程&#xff08;Internet of Things Engineering&#xff09;是一种以信息技术&#xff08;IT&#xff09;来改善实体世界中人们生活方式的新兴学科&#xff0c;它利用互联网技术为我们的日常生活活动提供服务和增益&#xff0c;从而让各种智能…
阅读更多...
1996-2022全球sar卫星数据

1996-2022全球sar卫星数据

数据简介 1992年JAXA&#xff08;Japan Aerospace Exploration Agency&#xff0c;日本宇宙航空研究开发机构&#xff09;发射了一颗JERS-1卫星&#xff0c;该卫星携带有18*24m分辨率的SAR传感器。随后&#xff0c;JAXA又在2006年和2014年分别发射了带有SAR传感器的alos卫星和…
阅读更多...
HelpLook 免费版与商业版的比较，帮助您快速选择！

HelpLook 免费版与商业版的比较，帮助您快速选择！

HelpLook 是一款零代码、开箱即用的帮助中心及博客网站搭建工具&#xff0c;只需简单几步&#xff0c;即可帮助企业、机构、个人发布在线品牌内容站点。 HelpLook 提供多个版本方案供不同需求的用户选择&#xff0c;今天想着重跟大家分享免费版和商业版&#xff0c;将从三个方面…
阅读更多...
DataFrame.plot函数详解（五）

DataFrame.plot函数详解（五）

DataFrame.plot函数详解&#xff08;五&#xff09; 散点图和箱体图实例 1. scatter DataFrame.plot.scatter(x, y, sNone, cNone, **kwargs) c&#xff1a; 是每个点的颜色&#xff0c;可以是一个值&#xff0c;也可以是数组值 s&#xff1a; 是每个点的大小&#xff0c;可以…
阅读更多...
MCU和MPU你分得清楚吗？

MCU和MPU你分得清楚吗？

最近有不少同学表示在学习嵌入式的过程中分不清MCU和MPU&#xff0c;这两个确实是长得很像、容易混淆的概念&#xff0c;这里我为大家仔细分辨一下。 从概念上讲&#xff0c;MCU指的是微控制器&#xff0c;优势在于“控制”&#xff0c;MPU指的是微处理器&#xff0c;优势在于“…
阅读更多...
Redis笔记——（狂神说）待续

Redis笔记——（狂神说）待续

Nosql概述 为什么要用NoSql&#xff1f; 1、单机mysql的年代&#xff1a;90年代&#xff0c;网站访问量小&#xff0c;很多使用静态网页html写的&#xff0c;服务器没压力。 当时瓶颈是&#xff1a;1)数据量太大一个机器放不下。2)数据的索引(BTree)&#xff0c;一个机器内存也…
阅读更多...
激活函数总结

激活函数总结

leakyRelu()激活函数 ReLU函数在输入大于0时返回输入值&#xff0c;否则返回0。 Leaky ReLU在输入小于0时会返回一个较小的负数&#xff0c;以保持一定的导数&#xff0c;使得信息可以继续向后传播。 Leaky ReLU函数&#xff1a; f(x) max(ax, x)其中&#xff0c;a是一个小…
阅读更多...
基于ssm技术大健康综合咨询问诊平台源码和论文

基于ssm技术大健康综合咨询问诊平台源码和论文

基于ssm技术大健康综合咨询问诊平台源码和论文065 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023