学习Uni-app开发小程序Day8

        前面几天,学习了vue的button组件、input组件,vue模版语法、计算属性等,在昨天又根据前面学习的,跟着做了一个小的购物车功能,今天学习了侦听器和计算属性

计算属性     computed

        computed是一个只读的状态,如果要修改computed定义的变量,不能直接修改,要修改数据源,不然会报错
        获取computed数据的时候,是和ref类型,需要加上.value的
        例如: console.log(fasName.value);
         在es6中,如果使用()=>这种方式,应该是
          ()=>{a+b}这种方式,但是当只有一行代码运算的时候,可以去掉双括号
          ()=>a+b

       下面是根据视频和自己整理的计算属性使用

<template><view class="out"><input type="text" v-model="firsName" placeholder="请输入姓名" /><input type="text" v-model="lirsName" placeholder="请输入名称" /><view> 球星全称:{{firsName+"-"+lirsName}}</view>   <!--这是直接在html中,使用两个变量进行展示的  --><view> 球星全称:{{fasName}}</view>                 <!--这是使用computed,进行计算后得到的值  --><view> 球星全称:{{fustName()}}</view>			   <!--这是使用方法得到的值,但是方法必须要添加() --><!-- 为什么要使用计算属性:计算属性是有缓存效果的,方法是每一次都会调用,是很耗内存的 --></view>
</template><script setup>import { ref,computed } from 'vue';const firsName=ref("");const lirsName=ref("");// computed是一个只读的状态,如果要修改computed定义的变量,不能直接修改,要修改数据源,不然会报错// 获取computed数据的时候,是和ref类型,需要加上.value的// 例如: console.log(fasName.value);// 在es6中,如果使用()=>这种方式,应该是// ()=>{a+b}这种方式,但是当只有一行代码运算的时候,可以去掉双括号// ()=>a+bconst fasName=computed(()=>firsName.value+"-"+lirsName.value);// 下面是定义一个变量,使用方法的形式进行数据操作const fustName=()=>firsName.value+"-"+lirsName.value;</script><style lang="scss" scoped>
.out{padding: 20px;input{border: 1px solid red;height: 40px;padding:0 10px;margin: 10px 0;}
}</style>

 侦听器:watch和watchEffect

        watch侦听器,在每次响应式状态发生变化时触发回调函数;第一个参数可以是:的第一个参数可以是不同形式的“数据源”:它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组:

<template><view class=""><input type="text" v-model="process" />{{process}}</view></template><script setup>import { ref, watch, watchEffect } from 'vue';// 使用监听器,watch:// 第一种:监听简单的文本框//  第一个参数是数据源,第二个参数是有两个参数,一个代表的是新值,newValue;一个是老值,oldValue;const process=ref("")watch(process,(n,o)=>{console.log(n);console.log(o);})// 第二种:监听一个对象,// 在监听对象的时候,需要用到一种()=>这种方式,然后跟着是新老值,/* const process=ref({name:"张三",age:29})watch(()=>process.value.name,(n,o)=>{console.log(n);})*/// watch的深度监听,这里是在{}后面,加上一个deep:true,这就是深度监听的,immediate:true,这是立即执行// 	深度侦听需要遍历被侦听对象中的所有嵌套的属性,当用于大型数据结构时,开销很大。// 	因此请只在必要时才使用它,并且要留意性能// watch(process,(n,o)=>{// 	console.log(n);// },{deep:true,immediate:true})// 使用watch监听两个的时候,是要在参数中用数组例如:// watch([变量1,变量2],([n变量1,n变量2],[o变量1,o变量2])=>{//  操作逻辑//  n变量1,n变量2:这是前面数组的新值//  o变量1,o变量2:这是前面数据的老值// })// watchEffect侦听器,是不需要添加其他参数的,直接是监听全局的,具体用法,查看官方文档// watchEffect(()=>{//  console.log(需要侦听的变量);// })
</script><style lang="scss" scoped>input{margin: 10px;padding: 0 10px;border: 1px solid red;}
</style>

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

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

相关文章

Golang | Leetcode Golang题解之第77题组合

题目&#xff1a; 题解&#xff1a; func combine(n int, k int) (ans [][]int) {// 初始化// 将 temp 中 [0, k - 1] 每个位置 i 设置为 i 1&#xff0c;即 [0, k - 1] 存 [1, k]// 末尾加一位 n 1 作为哨兵temp : []int{}for i : 1; i < k; i {temp append(temp, i)}t…

uniapp音乐播放整理

一、前置知识点 1.1 音频组件控制-uni.createInnerAudioContext() 创建并返回内部 audio 上下文 innerAudioContext 对象。 主要用于当前音乐播放&#xff1b; 1.1.1 innerAudioContext属性 属性类型说明只读平台差异说明srcString音频的数据链接&#xff0c;用于直接播放…

深入探索CSS3 appearance 属性:解锁原生控件的定制秘密

CSS3 的 appearance 属性&#xff0c;作为一个强大的工具&#xff0c;让我们得以细致入微地控制元素的外观&#xff0c;特别是对于那些具有平台特定样式的表单元素&#xff0c;如按钮、输入框等。本文不仅会深入解析 appearance 属性的基本工作原理和使用场景&#xff0c;还将通…

TypeScript在前端项目的渐进式采用策略

渐进式采用 TypeScript 在前端项目中的策略通常包括: 引入TypeScript 如果我们有一个简单的JavaScript模块utils.js&#xff0c;它包含一个函数用于计算两数之和&#xff1a; // utils.js export function add(a, b) {return a b; }首先&#xff0c;我们将文件扩展名改为.t…

vue的css深度选择器 deep /deep/

作用及概念 当 <style> 标签有 scoped 属性时&#xff0c;它的 CSS 只作用于当前组件中的元素&#xff0c;父组件的样式将不会渗透到子组件。在vue中是这样描述的&#xff1a; 处于 scoped 样式中的选择器如果想要做更“深度”的选择&#xff0c;也即&#xff1a;影响到子…

vscode+clangd阅读Linux内核源码

1. 禁用或卸载官方C/C插件. 2. 安装clangd插件 3. 清除之前的产物 4. 生成.config文件 5.编译生成内核镜像 6.编译内核模块 7.编译设备树文件 8.生成compile_commands.json文件 运行上述命令后&#xff0c;在内核源码根目录生成了compile_commands.json文件 9.设置clangd插…

Verlog-串口发送-FPGA

Verlog-串口发送-FPGA 引言&#xff1a; ​ 随着电子技术的不断进步&#xff0c;串口通信已成为嵌入式系统和计算机外设中一种广泛使用的异步通信方式。串口通信因其简单性、可靠性以及对硬件资源的低要求&#xff0c;在数据传输领域扮演着重要角色。在FPGA&#xff08;现场可编…

记录一个git无法push的问题

今天准备写新功能&#xff0c;想把之前的代码push到远程仓库&#xff0c;但是git突然就不工作了&#xff0c;报错如下 OpenSSL SSL_connect: Connection was reset in connection to gitee.com:443 因为我昨天把项目目录改了&#xff0c;以为是目录修改的问题&#xff0c;但是…

读天才与算法:人脑与AI的数学思维笔记25_涌现理论

1. 人工智能新闻 1.1. 人工智能新闻报道算法的核心是如何将未经处理的原始数据转换成新闻报道 1.2. 很少有记者为美联社决定使用机器来帮助报道这些新闻持反对意见 1.2.1. 像“Wordsmith”这样的算法&#xff0c;具有自动化的洞察力、科学的叙事能力&#xff0c;现在正被应用…

处理RESTful服务中不完整JSON数据的策略

在RESTful服务中&#xff0c;客户端与服务器之间的数据交换经常通过JSON格式进行。然而&#xff0c;客户端传递的JSON数据可能并不总是包含服务器端数据结构所需的所有字段。这种情况可能导致自动反序列化工具&#xff08;如serde&#xff09;无法直接将JSON数据转换为服务器端…

LINUX 精通 1——2.1.1 网络io与io多路复用select/poll/epoll

LINUX 精通 1 day12 20240509 算法刷题&#xff1a; 2道高精度 耗时 107min 课程补20240430 耗时&#xff1a;99 min day 13 20240512 耗时&#xff1a;200min 课程链接地址 前言 杂 工作5-10年 够用 费曼&#xff1a;不要直接抄&#xff0c;自己写&#xff1b;不要一个…

el-table-column 设置值显示 千分位

编写函数 formatNumber formatNumber(num){ if (num ! null) return num.toLocaleString(en-US); }, 用法 <el-table-column label"金额" align"right" prop"amount" key"amount":show-overflow-tooltiptrue>…

【WEEK11】 【DAY6】员工管理系统第七部分【中文版】

2024.5.11 Saturday 接上文【WEEK11】 【DAY5】员工管理系统第六部分【中文版】 目录 10.8.删除及404处理10.8.1.修改list.html10.8.2.修改EmployeeController.java10.8.3.重启10.8.4. 404页面处理10.8.4.1.把404.html文件移入10.8.4.2.重启并运行 10.8.5.退出登录状态10.8.5.1…

紫光计算机项目卓越中心负责人孙宇受邀为第十三届中国PMO大会演讲嘉宾

全国PMO专业人士年度盛会 紫光计算机科技有限公司信息技术中心项目总监&卓越中心负责人孙宇先生受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“PMO卓越中心核心能力拆解与落地-用创新绘制新蓝图”。大会将于6月29-30日在北京举办&#xff0c…

Mistoline: 超高质量控线的Controlnet【附加代码演示】

MistoLine 是 SDXL-ControlNet 模型&#xff0c;可适应任何类型的线条图输入&#xff0c;具有高精确度和出色的稳定性。它可以根据用户提供的各种类型的线稿&#xff08;包括手绘草图、不同的 ControlNet 线稿预处理器和模型生成的轮廓&#xff09;生成高质量图像&#xff08;短…

【信息系统项目管理师知识点速记】沟通管理:监督沟通

监督沟通是确保项目沟通按计划有效进行的关键环节,涉及评估沟通活动是否满足项目与干系人需求。此过程持续整个项目周期,旨在优化信息流并及时调整沟通策略。 核心要点 目的:确保沟通符合计划,适时、适地、适人传达正确信息。手段:通过客户满意度调查、经验教训回顾、团队…

web入门——导航栏

本专栏内容代码来自《响应式web&#xff08;HTML5CSS3Bootstrap&#xff09;》教材。 导航栏 实现代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content&…

Java面试题:描述Java垃圾回收的基本原理,以及如何通过代码优化来协助垃圾回收器的工作

Java垃圾回收&#xff08;Garbage Collection, GC&#xff09;的基本原理是自动管理程序中不再使用的对象的生命周期&#xff0c;释放内存资源以供其他对象使用。以下是Java垃圾回收的基本原理和如何通过代码优化来协助垃圾回收器的工作。 Java垃圾回收的基本原理 对象创建&am…

【harbor】harbor的搭建与使用

harbor的搭建与使用 文章目录 harbor的搭建与使用1. harbor的下载2. 创建ssl证书3.harbor的配置3. docker修改4.启动harbor5.使用docker总结 1. harbor的下载 harbor仓库地址&#xff1a;https://github.com/goharbor/harbor harbor主要是go语言写的&#xff0c;但是我们dock…

金三银四面试题(二十七):适配器模式知多少?

什么是适配器模式 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许将一个类的接口转换为客户期望的另一个接口。通过适配器&#xff0c;原本不兼容的接口可以一起工作&#xff0c;从而提高系统的灵活性和可扩展性。 关键元素&…