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

Vue3小案例—v-model 双向数据绑定实现动态列表增加和删除

news 2026/4/11 2:47:41

v-model双向绑定的原理：
  v-model 是Vue.js 提供的一个指令，用于实现双向数据绑定，它可以将表单元素的值与Vue实例的数据绑定在一起，当表单元素的值发生改变时，Vue实例的数据也会随之更新，反之亦然。
  v-model 的原理实际上就是通过事件机制实现的。当一个表单元素（如input、textarea）的值发生变化时，它会触发一个change事件或input事件，Vue.js 会监听这些事件并更新数据。同时，当Vue实例的数据发生变化时，也会触发一个更新视图的事件，从而实现数据与视图的同步更新。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="vue.js"></script></head><body><div id="box"><!-- v-model双向绑定的指令，快速获取输入框的值 -->{{mytext}}<input type="text" v-model="mytext" /><button @click="handleAdd">add</button><ul><!-- 第二个参数为索引下标 --><li v-for="item,index in datalist">{{item}}<button @click="handleDel(index)">delete</button></li></ul><!-- 列表为空时 --><div v-show="datalist.length===0">暂无待办事项</div></div><script>var obj = {data() {return {mytext: "",datalist: ["11", "22", "33"],};},methods: {//增加列表内容handleAdd() {console.log("add", this.mytext);this.datalist.push(this.mytext);// 清空输入框this.mytext = "";},//删除列表内容handleDel(index) {console.log("del", index);this.datalist.splice(index, 1);},},};var app = Vue.createApp(obj).mount("#box");</script></body>
</html>

注意： v-model 只能用于表单元素，如input、textarea、select 等，而不能用于自定义组件。

相关文章：

Vue3小案例—v-model 双向数据绑定实现动态列表增加和删除

v-model双向绑定的原理&#xff1a;   v-model 是Vue.js 提供的一个指令&#xff0c;用于实现双向数据绑定&#xff0c;它可以将表单元素的值与Vue实例的数据绑定在一起&#xff0c;当表单元素的值发生改变时&#xff0c;Vue实例的数据也会随之更新&#xff0c;反之亦然。  …...

编程日记 2023/8/5 2:58:22

MySQL 重置root 密码

5.7 版本 首先要把服务mysql57 关闭 net stop MySQL57 在安装的mysql57的程序的bin中 运行cmd&#xff08;管理员运行&#xff09; mysqld --defaults-file‘mysql存放数据的位置\my.ini’ --skip-grant-tables 上图 错误 注意&#xff1a;如果遇到mysqld: Can’t change dir…...

编程日记 2023/8/5 2:57:21

OpenCV图像处理技巧之空间滤波

1. 引言 再次问好&#xff0c;图像处理爱好者们&#xff01;&#x1f31f; 在前面的章节中&#xff0c;我们学习了图像处理的基础知识&#xff0c;并展现了图像增强的魅力。在这一节中&#xff0c;我们将更深入地研究空间滤波技术。 闲话少说&#xff0c;我们直接开始吧&#…...

编程日记 2023/8/5 2:56:20

Java超级玛丽小游戏制作过程讲解 第一天 创建窗口

package com.sxt;import javax.swing.*; import java.awt.event.KeyEvent; import java.awt.event.KeyListener;public class MyFrame extends JFrame implements KeyListener {//设置窗口的大小为800*600public MyFrame() {this.setSize(800, 600);//设置窗口中显示this.setLo…...

编程日记 2023/8/5 2:55:19

【POP3/IMAP/SMTP】QQ邮箱设置

什么是 POP3/IMAP/SMTP 服务 POP3 &#xff08;Post Office Protocol - Version 3&#xff09;协议用于支持使用电子邮件客户端获取并删除在服务器上的电子邮件。 IMAP &#xff08;Internet Message Access Protocol&#xff09;协议用于支持使用电子邮件客户端交互式存取服务…...

编程日记 2023/8/5 2:54:18

云计算——常见集群策略

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​ 目录 前言 一.什么是集群 二.集群策略 1.虚拟机HA 实现虚拟机高可用性通常涉及以下关键…...

编程日记 2023/8/5 2:53:17

c语言locale.h简介

<locale.h>提供的函数用于控制c标准库中对于不同的地区行为不一样的部分。&#xff08;地区通常是国家或者某种特定语言的地理区域&#xff09; 一、locale.h简单介绍 在标准库里&#xff0c;依赖地区的部分通常包括以下几项&#xff1a; 数字量的格式 货币的格式 字符…...

编程日记 2023/8/5 2:52:16

C++运算符重载详解(赋值、流插入流提取、前置后置++、取地址)

C运算符重载详解 基本介绍运算符重载案列1. 赋值运算符重载2. 前置和后置重载3. cout&#xff0c;cin(流插入&#xff0c;流提取重载)4. 取地址重载 基本介绍 C为了增强代码的可读性引入了运算符重载&#xff0c;运算符重载是具有特殊函数名的函数&#xff0c;也具有其 返回值…...

编程日记 2023/8/5 2:51:13

sql的count函数优化

sql的count(1)函数会执行遍历表统计符合条件的数目&#xff0c;下面有两个sql 第一条&#xff1a; select count(1) from membership_call_detail_statistics a where a.repository_id f2a4ed6b3e074e33bd99998c1def26f8 and a.statistics_date between 2023-04-01 00:00:0…...

编程日记 2023/8/5 2:50:12

Ai创作系统ChatGPT源码搭建教程+附源码

系统使用Nestjs和Vue3框架技术&#xff0c;持续集成AI能力到本系统&#xff01; 更新内容&#xff1a; 同步官方图片重新生成指令 同步官方 Vary 指令 单张图片对比加强 Vary(Strong) | Vary(Subtle) 同步官方 Zoom 指令 单张图片无限缩放 Zoom out 2x | Zoom out 1.5x 新增GP…...

编程日记 2023/8/5 2:49:10

力扣 416. 分割等和子集

题目来源&#xff1a;https://leetcode.cn/problems/partition-equal-subset-sum/description/ C题解&#xff08;思路来源代码随想录&#xff09; &#xff1a; 背包问题有多种背包方式&#xff0c;常见的有&#xff1a;01背包、完全背包、多重背包、分组背包和混合背包等等。…...

编程日记 2023/8/5 2:48:10

sqlyog导出mysql数据字典

1.打开sqlyog执行sql获取字典数据 SELECTt.COLUMN_NAME AS 字段名,t.COLUMN_TYPE AS 数据类型,CASE IFNULL(t.COLUMN_DEFAULT,Null) WHEN THEN 空字符串 WHEN Null THEN NULL ELSE t.COLUMN_DEFAULT END AS 默认值,CASE t.IS_NULLABLE WHEN YES THEN 是 ELSE 否 END AS 是否…...

编程日记 2023/8/5 2:47:08

【C++】多态的实现及其底层原理

个人主页&#xff1a;&#x1f35d;在肯德基吃麻辣烫 我的gitee&#xff1a;gitee仓库 分享一句喜欢的话&#xff1a;热烈的火焰&#xff0c;冰封在最沉默的火山深处。 文章目录 前言一、什么是多态&#xff1f;二、多态的构成条件2.1什么是虚函数&#xff1f;2.2虚函数的重写2…...

编程日记 2023/8/5 2:46:08

【网络编程】TCP带外数据总结

文章目录 一、带外数据基本知识二、带外数据的读写三、检测带外数据是否到达3.1、select上的异常事件3.2、SIGURG信号 四、带外标记 一、带外数据基本知识 带外数据&#xff08;Out Of Band&#xff0c;OOB&#xff09;&#xff0c;用于迅速通告对方本端发生的重要事件&#xf…...

编程日记 2023/8/5 2:45:06

高薪程序员面试题精讲系列133之微服务里的网关有哪些实现方案？你熟悉Gateway网关吗？

一. 面试题及剖析 1. 今日面试题 微服务里的网关有哪些实现方案？ Gateway网关是怎么实现的？ 你用过Gateway网关吗？ Gateway里有哪些路由规则？ 2. 题目剖析 在上一篇文章中，壹哥给大家梳理了微服务里的远程调用、熔断等相关的面试题。今天这篇文章，壹哥会重点给大家梳理…...

编程日记 2023/8/5 2:44:03

计算机网络（4） --- 协议定制

计算机网络&#xff08;3&#xff09; --- 网络套接字TCP_哈里沃克的博客-CSDN博客https://blog.csdn.net/m0_63488627/article/details/132035757?spm1001.2014.3001.5501 目录 1. 协议的基础知识 TCP协议通讯流程 ​编辑 2.协议 1.介绍 2.手写协议 1.内容 2.接口 …...

编程日记 2023/8/5 2:43:00

【Mybatis】Mybatis架构简介

文章目录 1.整体架构图2. 基础支撑层2.1 类型转换模块2.2 日志模块2.3 反射工具模块2.4 Binding 模块2.5 数据源模块2.6缓存模块2.7 解析器模块2.8 事务管理模块 3. 核心处理层3.1 配置解析3.2 SQL 解析与 scripting 模块3.3 SQL 执行3.4 插件 4. 接口层 1.整体架构图 MyBatis…...

编程日记 2023/8/5 2:41:57

如何使用大模型处理生活繁琐的工作

如果每封电子邮件、每个带有订单、发票、投诉、录用请求或工作申请的 PDF 都可以翻译成机器可读的数据&#xff0c;会怎样&#xff1f;然后可以由 ERP / CRM / LMS / TMS 自动处理吗&#xff1f;无需编程特殊接口。 听起来很神奇&#xff1f;它确实有一些魔力。但最近已成为可…...

编程日记 2023/8/5 2:40:56

RpcController作用浅析

RpcController作用浅析 前面提到了RpcConsumer的实现思路&#xff0c;但是并没说明RpcController有什么作用&#xff0c;不妨看看google::protobuf::RpcController&#xff1a; class PROTOBUF_EXPORT RpcController {public:inline RpcController() {}virtual ~RpcControlle…...

编程日记 2023/8/5 2:39:54

Linux（三）：Linux服务器下日常实操命令 (常年更新)

基础命令 cd命令&#xff1a;切换目录 cd &#xff1a;切换当前目录百至其它目录&#xff0c;比如进入/etc目录&#xff0c;则执行 cd /etccd / &#xff1a;在Linux 系统中斜杠“/”表示的是根目录。cd / ,即进入根目录.cd ~&#xff1a;进入用户在该系统的home目录&#…...

编程日记 2023/8/5 2:38:53

告别手动排版！用Zotero插件在Word中一键生成标准参考文献（含会议论文特殊处理）

学术写作效率革命&#xff1a;ZoteroWord全自动参考文献解决方案 在学术写作的漫长马拉松中&#xff0c;参考文献格式调整往往是最消耗精力的"最后一公里"。我曾亲眼目睹一位博士生在论文截稿前夜&#xff0c;手动调整了237条参考文献的标点符号和作者格式——这种场…...

编程新知 2026/4/11 2:43:52

（31）列出视图的垂直模式，起点在上方。水平模式，起点在左边。对于水平滚动框，也是如此

&#xff08;55&#xff09;&#xff08;56&#xff09; 谢谢...

编程新知 2026/4/11 2:09:36

保姆级教程：在PyBullet里用UR10+Robotiq夹爪抓取鼠标，从环境搭建到避坑调参

PyBullet实战&#xff1a;UR10机械臂与Robotiq夹爪的鼠标抓取全流程解析 机械臂仿真技术正在重塑工业自动化和机器人研究的未来。想象一下&#xff0c;你刚拿到一台UR10协作机械臂和Robotiq夹爪&#xff0c;急需验证抓取算法却受限于硬件调试周期——这正是PyBullet物理引擎大显…...

编程新知 2026/4/11 1:26:21

Open Claw 接入电商 API 接口，5 分钟实现全自动比价监控（附完整源码）

做电商、做比价工具、做代购选品的朋友都懂&#xff1a;手动查价慢、易漏价、跨平台对比难&#xff0c;爬虫还容易被反爬封 IP。今天给大家带来一套零爬虫、纯接口、稳定不掉线的方案&#xff1a;用 Open Claw 快速接入电商商品详情 API&#xff0c;实现实时价格抓取 跨平台比…...

编程新知 2026/4/11 1:20:16

示波器带宽选200MHz还是500MHz？手把手教你根据信号速率和PCB布线选择合适仪器

示波器带宽选200MHz还是500MHz&#xff1f;从信号完整性到实战选型指南 当你在实验室调试一块基于FPGA的高速数字电路板时&#xff0c;突然发现信号波形出现难以解释的振铃和过冲。此时你面前摆着两台示波器&#xff1a;一台200MHz带宽的经济型型号&#xff0c;另一台500MHz带宽…...

编程新知 2026/4/11 0:47:25

Keyence VT5 HMI嵌入式通信库：RS232协议栈实现

1. KeyenceHMI_Lib 库深度解析&#xff1a;面向工业现场的 RS232 HMI 通信协议栈实现1.1 工程定位与核心价值KeyenceHMI_Lib 是一个专为嵌入式平台&#xff08;特别是 Arduino 生态&#xff09;设计的轻量级通信库&#xff0c;其核心目标是在资源受限的微控制器上&#xff0c;可…...

编程新知 2026/4/11 0:43:24

MPU9150 DMP库深度解析：嵌入式运动协处理器工程实践

1. MPU9150_DMP库深度解析&#xff1a;嵌入式系统中DMP运动协处理器的工程化应用MPU9150是InvenSense公司于2012年推出的集成六轴惯性测量单元&#xff08;6-DoF IMU&#xff09;与三轴电子罗盘&#xff08;3-DoF Magnetometer&#xff09;的高精度MEMS传感器。其核心价值不仅在…...

编程新知 2026/4/11 0:39:18

安卓TV浏览器大屏适配终极方案：用Firefox+JS代码搞定全屏显示（附兼容性测试）

安卓TV浏览器大屏适配终极方案&#xff1a;用FirefoxJS代码搞定全屏显示&#xff08;附兼容性测试&#xff09; 在数字标牌、会议室展示等大屏应用场景中&#xff0c;安卓TV浏览器的适配问题一直是开发者的痛点。市面上常见的浏览器要么稳定性堪忧&#xff0c;要么缺乏对大屏显…...

编程新知 2026/4/10 20:43:11

ComfyUI Impact Pack实战手册：从检测器配置到人脸精修的完整工作流

1. ComfyUI Impact Pack核心功能解析 第一次接触ComfyUI Impact Pack时&#xff0c;我被它强大的视觉处理能力震撼到了。这个插件包就像是给AI装上了"视觉增强镜"&#xff0c;让普通的图像处理任务变得异常简单高效。Impact Pack最核心的价值在于它集成了三大检测器&…...

编程新知 2026/4/10 19:28:53

Java大厂面试：从Spring Boot到微服务架构的三轮攻防

Java大厂面试&#xff1a;从Spring Boot到微服务架构的三轮攻防 场景背景 在互联网大厂的面试中&#xff0c;谢飞机&#xff0c;一位搞笑又有些不靠谱的程序员&#xff0c;正在经历一场严肃的Java面试。面试官将从Spring Boot到微服务的多个技术点层层提问&#xff0c;带你深入…...

编程新知 2026/4/10 18:54:32