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

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

news 2026/2/9 7:57:17

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

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2026/1/11 2:37:51

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/31 13:48:37

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2026/1/25 11:52:39

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...

编程新知 2026/2/4 16:04:11

华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）

题目描述 给定一个整型数组，请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3，则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组，0<数组长度<= 100，0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

编程新知 2025/9/21 23:43:15

针对药品仓库的效期管理问题，如何利用WMS系统“破局”

案例&#xff1a; 某医药分销企业&#xff0c;主要经营各类药品的批发与零售。由于药品的特殊性&#xff0c;效期管理至关重要&#xff0c;但该企业一直面临效期问题的困扰。在未使用WMS系统之前&#xff0c;其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...

编程新知 2026/2/5 14:06:00

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

编程新知 2025/10/2 7:24:40

【深尚想】TPS54618CQRTERQ1汽车级同步降压转换器电源芯片全面解析

1. 元器件定义与技术特点 TPS54618CQRTERQ1 是德州仪器&#xff08;TI&#xff09;推出的一款 汽车级同步降压转换器&#xff08;DC-DC开关稳压器&#xff09;&#xff0c;属于高性能电源管理芯片。核心特性包括&#xff1a; 输入电压范围&#xff1a;2.95V–6V&#xff0c;输…...

编程新知 2026/2/8 4:36:58