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

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

news 2025/8/17 14:05:43

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

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/8/16 7:22:06

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/8/8 18:01:02

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/9 21:22:02

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/8/6 2:07:43

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/8/5 6:58:22

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/8/2 20:23:55

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2025/8/17 11:05:44

适应性Java用于现代 API：REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

编程新知 2025/7/8 22:58:33

LOOI机器人的技术实现解析：从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

编程新知 2025/6/10 21:22:04

渗透实战PortSwigger靶场：lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

编程新知 2025/8/17 11:29:23