当前位置： 首页 > news >正文

Vue-05

news 2026/4/3 11:04:11
  • v-model 应用于其他表单元素

    常见的表单元素都可以用v-model绑定关联 → 快速获取或设置表单元素的值
    它会根据控件类型自动选取正确的方法来更新元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学习网</title>
</head>
<body><div id="app"><h3>山外青山人外人</h3>姓名：<input type="text" v-model="username"><br><br>是否单身：<input type="checkbox" v-model="isSingle"><br><br>性别<!-- 同一个组内的 Radio 只能选择其中的一个，选择一个选项会取消其他选项的选择状态 --><!-- 使用name分组 --><!-- 加上value值用于提交给后台的数据 --><input v-model="gender" type="radio"  name="gender" value="1">男<input v-model="gender" type="radio"  name="gender" value="2">女<br><br>所在城市：<!-- option是需要设置value值提交给后台的 --><!-- select的value值,关联了选中的option的value值 --><select v-model="cityId"><option value="101">北京</option><option value="102">上海</option><option value="103">成都</option><option value="104">南京</option></select><br><br>自我描述：<textarea v-model="desc"></textarea><br><br><button>立即注册</button>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el:'#app',data:{username:'',isSingle:false,gender: '2 ',cityId:'101',desc:''}})</script>
</body> 
</html>


效果如图所示：

图1

  • 计算属性
    概念：基于现有的数据计算出来的新属性。依赖的数据变化，自动重新计算。
    语法：
    1. 声明在computed配置项中，一个计算属性对应一个函数
    2. 使用起来和普通属性一样使用 {{计算属性名}}
      注意：使用属性的时候不加括号，属性并非函数
      计算属性 → 可以将一段求值的代码进行封装
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算属性</title>
</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: 3 },]},computed:{totalCount(){// 基于现有的数据,编写求值逻辑// 计算属性函数内部,可以直接通过this访问到app实例// console.log(this.list)// 使用reduce 对this.list数组里面的num进行求和let total = this.list.reduce((sum, item) => sum + item.num, 0)return total}}})</script>
</body>
</html>

丢在methods与丢在computed的区别在于：
计算属性更加侧重于对数据的处理
作用：封装了一段对于数据的处理，求得一个结果
语法：

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

缓存特性：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算→并再次缓存

methods方法更加侧重于给实例提供一个可调用的方法
作用：给实例提供一个方法，调用以处理业务逻辑
语法：
4. 写在methods配置项中
5. 作为方法，需要调用 → this.方法名(){{方法名()}} @事件名="方法名"

computed默认的写法中只配置获取：

computed：{计算属性名(){计算逻辑return结果}}

如果想“修改” → 需要写计算属性的完整写法：

computed：{计算属性名：{get(){计算逻辑return结果}，set(修改的值){计算逻辑}}
}

  • 综合案例：成绩案例
    需求：

    1. 渲染功能
      用到：v-if v-else v-for v-bind:class
    2. 删除功能
      用到：点击传参 filter过滤覆盖原数组
      .prevent阻止默认行为
    3. 添加功能
      v-model v-model修饰符(.trim .number)
      unshift修改数组更新视图
    4. 统计总分、求平均分
      计算属性 reduce求和

  • watch侦听器（监视器）
    作用：监视数据变化，执行一些业务逻辑或异步逻辑
    语法：

    1. 简单写法 → 简单类型数据，直接监视
    2. 完整写法 → 添加额外配置项


    （防抖：延迟执行 → 干啥先等一等，延迟一会，一段时间内没有再次触发才执行）
    （async用于申明一个function是异步的）
    简单写法示例：

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

相关文章：

Vue-05

v-model 应用于其他表单元素 常见的表单元素都可以用v-model绑定关联 → 快速获取或设置表单元素的值 它会根据控件类型自动选取正确的方法来更新元素 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name…...

编程日记 2024/4/9 3:36:19

Mongodb中一个小巧的数据更新命令$inc

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第55篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。 $inc是一个很小巧的命令。说它小巧&#xff0c;一个是因为短&#xff0c;只有三个字符。另一个是说…...

编程日记 2024/4/9 3:32:16

Java基于SpringBoot+Vue的专家医院预约挂号系统，附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…...

编程日记 2024/4/9 3:30:13

STM32一个地址未对齐引起的 HardFault 异常

1. 概述 客户在使用 STM32G070 的时候&#xff0c;KEIL MDK 为编译工具&#xff0c;当编译优化选项设置为Level0 的时候&#xff0c;程序会出现 Hard Fault 异常&#xff0c;而当编译优化选项设置为 Level1 的时候&#xff0c;则程序运行正常。表面上看&#xff0c;这似乎是 K…...

编程日记 2024/4/9 3:24:08

spring事务那些事

实际工作中还会面临千奇百怪的问题&#xff0c;看下面返个例子&#xff08;注意MySql数据库测试&#xff09;&#xff1a; //1.hello1Service 调用 hello2Service Transactional(propagation Propagation.REQUIRED,rollbackFor Exception.class) public void doUpdate() {//…...

编程日记 2024/4/9 3:23:05

设计模式深度解析：AI大模型下的策略模式与模板方法模式对比解析

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL应用》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 策略模式与模板方法模式对比解析 文章目录 &#x1f31f;引言&#x1f31f;Part 1:…...

编程日记 2024/4/9 3:15:56

贪婪算法python实现

贪婪算法&#xff08;Greedy Algorithm&#xff09;是一种解决问题的策略&#xff0c;它基于一种贪心的思想&#xff1a;在每一步选择中都采取当前状态下最好或最优的选择&#xff0c;从而希望最终能够得到全局最优解。 其核心思想可以简单概括为“当前局部最优选择”&#xff…...

编程日记 2024/4/9 3:14:55

(一)基于IDEA的JAVA基础12

一维数组 为什么使用数组: 当我们需要存储一系列数据的时候&#xff0c;就需要用到数组&#xff0c;如果不使用数组&#xff0c;我们就要需要一个一个的去声明变量&#xff0c;这样浪费内存空间&#xff0c;同时效率低下。 什么是数组: 数组本身就是一个变量&#xff0c;只…...

编程日记 2024/4/9 3:13:54

vue3中封装table表格

封装实例useTable import {ref } from vue export function useTable(api) {const data = ref([])const refre...

编程日记 2024/4/9 3:11:52

【Redis】Redis的使用

登录redis [roottest2 ~]# redis-cli 127.0.0.1:6379> 或[roottest2 ~]# redis-cli -h 192.168.67.12 -p 6379 192.168.67.12:6379> redis-benchmark 测试工具 redis-benchmark 是官方自带的Redis性能测试工具&#xff0c;可以有效的测试Redis服务的性能 基本的测试语…...

编程日记 2024/4/9 3:08:49

【机器学习300问】60、图像分类任务中，训练数据不足会带来什么问题？如何缓解图像数据不足带来的问题？

在机器学习中&#xff0c;绝大部分模型都需要大量的数据进行训练和学习&#xff08;包括有监督学习和无监督学习&#xff09;&#xff0c;然而在实际应用中经常会遇到训练数据不足的问题。就比如图像分类这样的计算机视觉任务&#xff0c;确实依赖于大规模且多样化的训练数据以…...

编程日记 2024/4/9 3:04:46

鸿蒙内核源码分析 (内存管理篇) | 虚拟内存全景图是怎样的

初始化整个内存 OsSysMemInitOsMainmain从 main() 跟踪可看内存部分初始化是在 OsSysMemInit() 中完成的。 UINT32 OsSysMemInit(VOID) {STATUS_T ret;OsKSpaceInit();//内核空间初始化ret OsKHeapInit(OS_KHEAP_BLOCK_SIZE);// 内核动态内存初始化 512K if (ret ! LOS_OK…...

编程日记 2024/4/9 3:03:45

基于深度学习的电动自行车头盔佩戴检测系统

文章目录 1. 文档说明2. 运行环境说明2.1 硬件配置2.2 软件配置2.3 程序依赖库 3. 基本环境配置3.1 软件安装3.1.1 集成开发环境安装与配置3.1.2 数据库安装与配置3.1.3 编程语言安装3.1.4 CUDA和cuDNN安装与配置3.1.5 机器学习库安装 3.2 依赖库安装 4. 运行程序资源下载地 1.…...

编程日记 2024/4/9 3:00:42

GO - 泛型编程

go - 泛型编程 介绍 泛型即开发过程中编写适用于所有类型的模板&#xff0c;只有在具体使用的时候才能确定其真正的类型。随着Go 1.18版本的发布&#xff0c;泛型正式成为了Go语言的一部分。 在编写代码时&#xff0c;我们经常会遇到需要处理不同类型的数据的情况。传统上&am…...

编程日记 2024/4/9 2:58:40

TouchableOpacity和TouchableWithoutFeedback区别

TouchableOpacity和TouchableWithoutFeedback都是React Native中定义的可触摸组件&#xff0c;但它们之间有一些区别&#xff1a; 点击效果&#xff1a;TouchableOpacity在被按下时会有一个透明度变化的点击效果&#xff0c;而TouchableWithoutFeedback则没有点击效果。 子组…...

编程日记 2024/4/9 2:57:39

MySQL EXISTS 语句和IN语句有啥区别

在 MySQL 中&#xff0c;EXISTS 和 IN 是用于子查询的两种不同方式&#xff0c;它们有一些区别&#xff1a; 1. **IN 语句**&#xff1a; - IN 子句用于在 WHERE 子句中指定多个值&#xff0c;并检查主查询中的某个列是否在子查询返回的结果集中。 - IN 子句适用于子查询…...

编程日记 2024/4/9 2:56:38

Java集合体系面试题

1. Java中有哪些主要的集合接口&#xff1f; 答案&#xff1a;Java中主要的集合接口有Collection、List、Set、Queue和Map。 2. 请解释List和Set之间的主要区别。 答案&#xff1a;List和Set的主要区别在于元素的顺序和唯一性。List是有序的集合&#xff0c;允许存储重复的元…...

编程日记 2024/4/9 2:54:36

React-2-useState-获取DOM-组件通信

一.useState useState 是一个 React Hook&#xff08;函数&#xff09;&#xff0c;它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果 本质&#xff1a;和普通JS变量不同的是&#xff0c;状态变量一旦发生变化组件的视图UI也会跟着变化**&#xff08;数据驱动视…...

编程日记 2024/4/9 2:48:31

使用nodejs搭建脚手架工具并发布到npm中

使用nodejs搭建脚手架工具并发布到npm中 一、安装环境依赖及脚手架搭建过程二、搭建Monorepo 风格的脚手架工程三、脚手架的必备模块命令参数模块获取命令参数设置子命令用户交互模块文件拷贝模块脚手架中的路径处理目录守卫文件拷贝模块动态文件生成模块mustache简介自动安装依…...

编程日记 2024/4/9 2:47:30

【面经】3月29日 美团/美团平台/后端/一面/1h

面试官先介绍自己部门的业务&#xff1a;存储中心&#xff0c;涉及到大量数据的离线处理&#xff08;亿级别&#xff09;。 手撕&#xff08;删除链表倒数第k个节点&#xff09; 自我介绍 项目介绍&#xff08;还没说完被打断了&#xff0c;面试官说你这个感觉就是把功能说了一…...

编程日记 2024/4/9 2:45:27

除螨仪哪款好？除螨仪哪个品牌最好？内行人揭秘米家、希亦、友望等除螨仪十大品牌排名，挑选不踩雷！

在选购除螨仪时&#xff0c;很多朋友会问&#xff1a;除螨仪哪个牌子好&#xff1f;现在市面上的除螨仪真的五花八门&#xff0c;不少商家打着“紫外线深层杀菌”“强力拍打彻底除螨”的旗号&#xff0c;实则是偷工减料的不专业产品。用起来要么拍打力度弱、吸力不足&#xff0…...

编程新知 2026/4/3 9:30:41

旧Mac焕新：使用OpenCore Legacy Patcher让2008-2017年设备支持最新macOS系统

旧Mac焕新&#xff1a;使用OpenCore Legacy Patcher让2008-2017年设备支持最新macOS系统 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 老旧设备升级正成为越…...

编程新知 2026/4/3 9:02:00

Claude颠覆AI编程

&#x1f680; Claude 4 正式发布&#xff01;Anthropic 这次真的要颠覆 AI 编程了 今天&#xff0c;AI 领域迎来核弹级更新——Anthropic 正式发布 Claude 4 系列模型&#xff01;免费可用、7 小时自主编程&#xff0c;开发者直呼"生产力革命来了"&#xff01; 一、…...

编程新知 2026/4/3 8:47:28

ChatGLM3-6B Streamlit应用案例：代码辅助、长文档摘要、闲聊三合一

ChatGLM3-6B Streamlit应用案例&#xff1a;代码辅助、长文档摘要、闲聊三合一 1. 项目简介&#xff1a;你的本地全能AI助手 想象一下&#xff0c;你正在写一段复杂的代码&#xff0c;卡在某个逻辑上&#xff1b;或者面对一份几十页的技术文档&#xff0c;需要快速提炼核心&a…...

编程新知 2026/4/3 8:08:54

碧蓝航线自动化助手：5分钟掌握解放双手的终极解决方案

碧蓝航线自动化助手&#xff1a;5分钟掌握解放双手的终极解决方案 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研&#xff0c;全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAutoScript 你是否曾为…...

编程新知 2026/4/3 8:04:53

GLM-4-9B-Chat-1M快速部署：单卡A10/A100实测8GB显存稳定运行

GLM-4-9B-Chat-1M快速部署&#xff1a;单卡A10/A100实测8GB显存稳定运行 1. 项目简介 今天给大家介绍一个让我眼前一亮的本地大模型部署方案——GLM-4-9B-Chat-1M。这个项目基于智谱AI最新的开源模型&#xff0c;通过Streamlit框架实现了完全本地化部署&#xff0c;不需要联网…...

编程新知 2026/4/3 7:34:36

Phi-4-mini-reasoning vLLM模型服务化：gRPC接口与Protobuf定义详解

Phi-4-mini-reasoning vLLM模型服务化&#xff1a;gRPC接口与Protobuf定义详解 1. 模型概述 Phi-4-mini-reasoning 是一个基于合成数据构建的轻量级开源模型&#xff0c;专注于高质量、密集推理的数据处理。作为Phi-4模型家族的一员&#xff0c;它特别针对数学推理能力进行了…...

编程新知 2026/4/3 6:13:10

长春市场较好的洗浴设计企业推荐榜单

在长春&#xff0c;洗浴文化源远流长&#xff0c;洗浴中心如雨后春笋般涌现。对于想要开洗浴中心或者对现有洗浴场所进行升级改造的老板们来说&#xff0c;找一家靠谱的设计企业至关重要。今天就给大家带来一份长春市场上较好的洗浴设计企业推荐榜单&#xff0c;其中有一家企业…...

编程新知 2026/4/3 5:42:49

qt模块学习记录

qt模块学习记录一、Qt Core其他模块都用到的核心非图形类二、Qt GUI 设计 GUI 界面的基础类&#xff0c;包括 OpenGL三、功能模块Qt Network 使网络编程更简单和轻便的类Qt SQL 使用 SQL 用于数据库操作的类Qt Multimedia 音频、视频、摄像头和广播功能的类四、老式界面Qt Widg…...

编程新知 2026/4/3 5:32:29

AgentCPM深度研报助手使用技巧：三个参数让报告更专业

AgentCPM深度研报助手使用技巧&#xff1a;三个参数让报告更专业 1. 为什么你的AI研报总像“流水账”&#xff1f;问题可能出在参数上 你用过AI写报告&#xff0c;结果是不是这样&#xff1a;内容看起来都对&#xff0c;但读起来总觉得“差点意思”&#xff1f;结构松散像拼凑…...

编程新知 2026/4/3 5:20:18