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

Vue 本地应用 记事本 v-on v-model v-for使用

news 2026/5/21 9:04:35

新增功能

 vue当中如何生成列表结构？使用的指令是v-for，同时要有一个可以生成列表的数据，常用的是数组。记事本里面的内容并不复杂，所以这里使用字符串数组就行了。

获取用户输入的内容使用绑定v-model，双向数据绑定（可以将表单的内容和data当中的数据关联起来，可以非常方便的设置和取值）。这个指令的使用需要在data当中定义绑定的数据，接着将这个指令设置给相应的表单元素就可以了。

回车的时候新增数据，事件绑定v-on，使用回车键那么就是enter。

根据数组生成列表的结构，获取用户输入的内容（其实就是使用v-model进行双向数据绑定）。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><link href="" type="text/css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style type="text/css"></style>
</head><body>    <div id="vue"><input type="text" v-model="inputvalue" @keyup.enter="add()"><ul ><li  v-for="(item,index) in list">{{ index +1 }}.  {{ item }}</li></ul></div><script type="text/javascript">new Vue({   el: "#vue",   data:{ list: ["写代码","吃饭饭","睡觉觉","打游戏"],inputvalue: "好好学习"},methods:{  add:function(){this.list.push(this.inputvalue)}}}
)</script></body></html>

 删除

splice可以通过对应的下标来删除指定的元素。这里通过形参的方式传递给函数。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><link href="" type="text/css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style type="text/css"></style>
</head><body>    <div id="vue"><input type="text" v-model="inputvalue" @keyup.enter="add()"> <br><input type="text" v-model="arrindex" @keyup.enter="remove(arrindex)"><ul ><li  v-for="(item,index) in list" @click="remove(index)">{{ index +1 }}.  {{ item }}</li></ul></div><script type="text/javascript">new Vue({   el: "#vue",   data:{ list: ["写代码","吃饭饭","睡觉觉","打游戏"],inputvalue: "好好学习",arrindex: 1},methods:{  add:function(){this.list.push(this.inputvalue)},remove:function(arrindex){console.log(arrindex);//第一个是索引，第二个参数是一次性删除几个this.list.splice(arrindex,1)}}}
)</script></body></html>

相关文章：

Vue 本地应用 记事本 v-on v-model v-for使用

新增功能 vue当中如何生成列表结构&#xff1f;使用的指令是v-for&#xff0c;同时要有一个可以生成列表的数据&#xff0c;常用的是数组。记事本里面的内容并不复杂&#xff0c;所以这里使用字符串数组就行了。 获取用户输入的内容使用绑定v-model&#xff0c;双向数据绑定&a…...

编程日记 2023/8/9 16:46:04

智能质检技术的核心环节：语音识别和自然语言处理

随着呼叫中心行业的快速发展和客户服务需求的不断提高&#xff0c;越来越多的企业开始采用智能质检技术&#xff0c;以提高呼叫中心的质量和效率。而在智能质检技术中&#xff0c;语音识别和自然语言处理是其核心环节&#xff0c;对于提高质检的准确性和效率具有重要作用。 语音…...

编程日记 2023/8/9 16:45:03

Python 中的值传递 和 引用传递

在 Python 当中的函数调用当中&#xff0c; numpy 和 torch.tensor 都 是按照 引用传递 传到函数里面的&#xff0c;也就是说 修改 传入函数的 形参&#xff0c;也会导致 未传入之前的形参 发生 变化。 position 是一个 tensor; 下面这段代码第一行&#xff0c;如果在函数里面…...

编程日记 2023/8/9 16:44:01

【雕爷学编程】Arduino动手做（200）---WS2812B幻彩LED灯带6

37款传感器与模块的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&#x…...

编程日记 2023/8/9 16:42:59

ChatGPT在工作中的七种用途

1. 用 ChatGPT 替代谷歌搜索引擎 工作时&#xff0c;你一天会访问几次搜索引擎&#xff1f;有了 ChatGPT&#xff0c;使用搜索引擎的频率可能大大下降。 据报道&#xff0c;谷歌这样的搜索引擎巨头&#xff0c;实际上很担心用户最终会把自己的搜索工具换成 ChatGPT。该公司针对…...

编程日记 2023/8/9 16:41:56

redis 持久化 与 键淘汰策略

redis运维核心&#xff1a; aof日志(全持久化 增量) 、 rdb(半持久化/全量备份) 、 键淘汰策略 、 高可用 1、Redis是基于内存的&#xff0c;一旦Redis重启/退出/故障&#xff0c;内存的数据将会全部丢失。故而有了持久化。 2、持久化&#xff1a;将内存中的数据存于磁盘中&am…...

编程日记 2023/8/9 16:40:55

PyCharm新手入门指南

安装好Pycharm后&#xff0c;就可以开始编写第一个函数&#xff1a;Hello World啦~我们就先来学习一些基本的操作&#xff0c;主要包含新建Python文件&#xff0c;运行代码&#xff0c;查看结果等等。 文章主要包含五个部分&#xff1a; 一、界面介绍 主要分为菜单栏、项目目录…...

编程日记 2023/8/9 16:39:53

【图像去噪】基于混合自适应（EM 自适应）实现自适应图像去噪研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/9 16:38:52

[保研/考研机试] KY102 计算表达式 上海交通大学复试上机题 C++实现

描述 对于一个不存在括号的表达式进行计算 输入描述&#xff1a; 存在多组数据&#xff0c;每组数据一行&#xff0c;表达式不存在空格 输出描述&#xff1a; 输出结果 示例1 输入&#xff1a; 6/233*4输出&#xff1a; 18思路&#xff1a; ①设立运算符和运算数两个…...

编程日记 2023/8/9 16:37:51

源码解析Collections.sort ——从一个逃过单测的 bug 说起

本文从一个小明写的bug 开始&#xff0c;讲bug的发现、排查定位&#xff0c;并由此展开对涉及的算法进行图解分析和源码分析。 事情挺曲折的&#xff0c;因为小明的代码是有单测的&#xff0c;让小明更加笃定自己写的没问题。所以在排查的时候&#xff0c;也经历了前世的500年…...

编程日记 2023/8/9 16:36:50

一周 AIGC 丨苹果下架多款 AIGC 应用，阿里云开源通义千问 70 亿参数模型

多个 AIGC 应用在苹果应用商店下架&#xff0c;包含数据采集和使用不够规范等问题。阿里云开源通义千问 70 亿参数模型&#xff0c;包括通用模型 Qwen-7 B 和对话模型 Qwen-7 B-Chat。腾讯混元大模型开始应用内测&#xff0c;内部多个业务线接入测试。百度智能云“千帆大模型平…...

编程日记 2023/8/9 16:35:49

tomcat虚拟主机配置演示

一.新建用于显示的index.jsp文件&#xff0c;写入内容 二.修改tomcat/apache-tomcat-8.5.70/conf/server.xml配置文件 匹配到Host那部分&#xff0c;按上面格式在后面添加自己的域名和文件目录信息 主要是修改name和docBase 保存退出重启tomcat&#xff0c;确保tomcat运行…...

编程日记 2023/8/9 16:34:47

Nacos基本应用

Nacos 基本应用 Nacos 提供了 SDK 和 OpenAPI 方式来完成服务注册与发现等操作&#xff0c;SDK 实际上是对于 http 请求的封装。 微服务架构的电子商务平台&#xff0c;其中包含订单服务、商品服务和用户服务。可以使用 Nacos 作为服务注册和发现的中心&#xff0c;以便各个微…...

编程日记 2023/8/9 16:33:45

UML的类图规则

public:号 private:-号 protected:#号类图多重关系&#xff1a; 泛化关系&#xff1a; 概念&#xff1a;也就是继承关系。表示方式&#xff1a;用带空心三角形的直线来表示。例子&#xff1a;动物和猫&#xff0c;人和老师关联关系&#xff1a; 概念&#xff1a;用于表示一类对…...

编程日记 2023/8/9 16:32:44

uniapp实现微信小程序长按二维码扫码加群或好友

<template><view><view class"tit">欢迎扫码加入</view><image show-menu-by-longpress"true" src"/static/img/qrcode/1.jpg" class"btn-icon" click"previewImage"></image></vie…...

编程日记 2023/8/9 16:31:42

轮转数组（每日一题）

“路虽远&#xff0c;行则将至” ❤️主页&#xff1a;小赛毛 ☕今日份刷题&#xff1a;轮转数组 题目链接&#xff1a;轮转数组 题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例1&#xff1a; 输入…...

编程日记 2023/8/9 16:30:41

jmeter使用步骤

jmeter 使用步骤 1&#xff0c;进入jmeter目录中的bin目录&#xff0c;双击jmeter.bat 打开 2&#xff0c;右键test plan 创建线程组 3&#xff0c;配置线程组参数 4&#xff0c;右键刚刚创建的线程组&#xff0c;创建请求&#xff0c;填写请求地址 5&#xff0c;需要携带to…...

编程日记 2023/8/9 16:29:40

Ts中泛型的理解与使用

一、什么是泛型 在定义函数&#xff0c;定义接口或定义class类的时候&#xff0c;不先规定其类型&#xff0c;在使用的时候进行定义类型。 二、使用 1、定义函数&#xff1a; // 函数类型 function AA<T>(arg:T):T{return arg } AA<number>(1) AA<string>…...

编程日记 2023/8/9 16:28:38

uniapp使用eatchs雷达图

引入插件 <template><view class"page"><view class"AllBox"><view class"topTit">标题</view><view class"leftTit">对比分析</view><view class"tableBox"><view cl…...

编程日记 2023/8/9 16:27:37

PostgreSQL jsonb

PostgreSQL jsonb jsonb 函数以及操作符 在PostgreSQL中&#xff0c;有许多用于处理JSONB数据类型的内置函数和操作符。下面列出了一些常用的JSONB函数和操作符&#xff1a; jsonb_pretty(jsonb) 该函数将JSONB数据格式化为易读的多行字符串。jsonb_typeof(jsonb) 该函数返回…...

编程日记 2023/8/9 16:26:35

保姆级教程：用Ucinet和Data数据园搞定CNKI文献关键词共现分析（附数据清洗技巧）

学术研究者的文献计量分析实战指南&#xff1a;从CNKI数据到知识图谱可视化 在当今信息爆炸的时代&#xff0c;学术研究者面临的最大挑战之一是如何从海量文献中快速识别研究热点和知识结构。文献计量分析作为一种量化研究方法&#xff0c;能够帮助学者们系统性地梳理领域发展脉…...

编程新知 2026/5/21 8:14:03

嵌入式异构多处理器评估板：从核心原理到工业应用实战

1. 项目概述&#xff1a;当“异构”不再是PPT上的概念在嵌入式开发领域&#xff0c;尤其是边缘计算、工业控制和智能物联网设备中&#xff0c;我们正面临一个越来越普遍的困境&#xff1a;单一架构的处理器越来越难以满足复杂且矛盾的系统需求。一方面&#xff0c;我们需要强大…...

编程新知 2026/5/21 7:59:36

嵌入式Linux下MT7601U无线网卡驱动移植与网络配置实战

1. 项目概述最近在做一个基于Linux 3.5内核的嵌入式项目&#xff0c;需要让开发板通过USB接口连接无线网络。手头正好有几个闲置的360随身WiFi&#xff0c;查了一下&#xff0c;它的核心芯片是联发科&#xff08;MediaTek&#xff09;的MT7601U&#xff0c;这是一款非常经典的U…...

编程新知 2026/5/21 6:26:03

告别黑白日志！用Xshell正则高亮集，让服务器报错、成功信息一目了然

告别黑白日志&#xff01;用Xshell正则高亮集&#xff0c;让服务器报错、成功信息一目了然 在运维和开发人员的日常工作中&#xff0c;与服务器打交道是家常便饭。无论是查看系统日志、调试应用程序&#xff0c;还是执行自动化脚本&#xff0c;我们都需要面对大量的命令行输出信…...

编程新知 2026/5/21 6:08:44

告别‘偏科’模型：用CAST双流架构搞定视频动作识别，兼顾时空理解

时空双流协同&#xff1a;CAST架构如何重塑视频动作识别的平衡之道 视频动作识别正面临一个关键瓶颈——现有模型往往在时空理解上"偏科"。就像人类大脑需要左右半球协同工作才能完整理解世界一样&#xff0c;理想的视频理解模型也需要同时具备敏锐的空间感知和精准的…...

编程新知 2026/5/21 6:04:15

美团春招笔试“小美的朋友关系”全网无AC？我用逆向并查集搞定它（附完整代码）

逆向并查集&#xff1a;破解美团笔试"小美的朋友关系"难题 大厂算法笔试中&#xff0c;总有一两道题能卡住绝大多数求职者。今年美团春招的"小美的朋友关系"就是这样一道"拦路虎"——全网找不到AC代码&#xff0c;无数人在超时和错误答案中挣扎。…...

编程新知 2026/5/21 5:45:33

多功能手持仪设计：从传感器融合到低功耗架构的工程实践

1. 项目概述与核心价值最近几年&#xff0c;我身边不少从事设备维护、户外作业和现场检测的朋友&#xff0c;都在抱怨一个事儿&#xff1a;工具包越来越沉&#xff0c;功能却越来越单一。巡检要带测温枪&#xff0c;查线路要带万用表&#xff0c;记录数据还得掏出手机或平板&am…...

编程新知 2026/5/21 4:41:24

企业级RAG系统数据可信生死线：Perplexity验证功能内测权限仅剩最后17个——附白名单申请通道

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;企业级RAG系统数据可信生死线&#xff1a;Perplexity验证功能内测权限仅剩最后17个——附白名单申请通道 在企业级RAG&#xff08;Retrieval-Augmented Generation&#xff09;系统中&#xff0c;检索结果与生…...

编程新知 2026/5/21 3:33:43

从攻到防：手把手在Kali Linux上搭建ARP欺骗实验环境（含Wireshark分析）

构建安全的本地网络实验室&#xff1a;Kali Linux下ARP欺骗攻防实战指南 在网络安全领域&#xff0c;理解攻击原理是构建有效防御的第一步。ARP欺骗作为一种经典的中间人攻击技术&#xff0c;常被用于网络渗透测试中。本文将带你从零开始搭建一个完全隔离的虚拟实验环境&#x…...

编程新知 2026/5/21 3:02:07

华为昇腾Atlas200边缘设备开箱即用指南：从CANN环境到YOLOv8模型部署的保姆级避坑教程

华为昇腾Atlas200边缘设备实战&#xff1a;YOLOv8模型部署全流程避坑指南 第一次拿到华为昇腾Atlas200边缘计算设备时&#xff0c;那种既兴奋又忐忑的心情记忆犹新。作为一款专为AI推理设计的边缘设备&#xff0c;Atlas200凭借其强大的算力和紧凑的体型&#xff0c;在智能安防…...

编程新知 2026/5/21 2:28:54