【vue-8】记事本案例

  • 小知识点:

列表末尾插入数据:

list.push("lihua")

列表删除数据:

# index要删除数据的索引值,1为删除数据长度
list.splice(index,1)
  • 完整示例代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><input type="text" v-model="web.name"> <button @click="add">增加</button><ul><li v-for="(value, index) in web.name_list">{{value}} <button @click="del(index)">删除</button></li>           </ul>{{web.name_list.length}} <button @click="clear">清除</button></div><script type="module">import {createApp, reactive} from './vue.esm-browser.js'// const {createApp, reactive} = VuecreateApp({// setup选项,用于设置响应式数据和方法等setup(){ const web = reactive({name:"liuhua",name_list:["zhangsan", "lisi"]})const add = () =>{web.name_list.push(web.name)}const del = (index) =>{web.name_list.splice(index,1)}const clear = () =>{web.name_list = []}return{web,add,del,clear}}}).mount("#app")// mount为挂载</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/348062.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue3+Vite报错:vite忽略.vue扩展名 Failed to resolve import ..... Does the file exist?

Vue3Vite报错&#xff1a;vite忽略.vue扩展名 Failed to resolve import … Does the file exist? 先看报错&#xff1a; 分析原因 原因是我们没有写后缀名 建议你在你的vite.config.js中加上如下配置 import { defineConfig } from "vite"; import vue from &qu…

NMF算法

1. NMF算法 NMF算法&#xff0c;即非负矩阵分解&#xff0c;是一种无监督学习算法&#xff0c;主要用于数据降维和特征提取&#xff0c;特别是在数据元素具有非负性约束的情况下。 NMF是一种数据降维模型&#xff0c;它的基本模型是通过矩阵分解将非负数据转换到新的空间&…

【调试笔记-20240612-Linux-在 QEMU 中配置 OpenWrt-23.05 支持访问 Windows 宿主机的共享目录】

调试笔记-系列文章目录 调试笔记-20240612-Linux-在 QEMU 中配置 OpenWrt-23.05 支持访问 Windows 宿主机的共享目录 文章目录 调试笔记-系列文章目录调试笔记-20240612-Linux-在 QEMU 中配置 OpenWrt-23.05 支持访问 Windows 宿主机的共享目录 前言一、调试环境操作系统&…

MIPI A-PHY协议学习

一、说明 A-PHY是一种高带宽串行传输技术,主要为了减少传输线并实现长距离传输的目的,比较适用于汽车。同时,A-PHY兼容摄像头的CSI协议和显示的DSI协议。其主要特征: 长距离传输,高达15m和4个线内连接器; 高速率,支持2Gbps~16Gbps; 支持多种车载线缆(同轴线、屏蔽差分…

5.2 参照完整性

5.2.1 外键约束 语法格式&#xff1a;constraint < symbol > foreign key ( col_nam1[, col_nam2... ] ) references table_name (col_nam1[, col_nam2...]) [ on delete { restrict | cascade | set null | no action } ] [ on update { restrict | cascade | set nu…

[CAN] 创建解析CAN报文DBC文件教程

&#x1f449;本教程需要先安装CANdb软件&#xff0c;[CAN] DBC数据库编辑器的下载与安装 &#x1f64b;前言 DBC(全称为Database CAN)&#xff0c;是用于描述单个CAN网络中各逻辑节点的信息。 DBC是汽车ECU&#xff08;Electronic Control Unit&#xff0c;电子控制单元&…

RocketMQ事务性消息

RocketMQ事务性消息是一定能保证消息发送成功的 事务消息发送步骤&#xff1a; &#xff08;1&#xff09;发送方将半事务消息发送至RocketMQ服务端。 &#xff08;2&#xff09;RocketMQ服务端将消息持久化之后&#xff0c;向发送方返回ack确认消息已经发送成功。由于消息为…

STM32项目分享:智能家居语音系统

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB打板焊接图: 五、程序设计 六、实验效果 七、包含内容 项目分享 一、前言 项目成品图片&#xff1a; 哔哩哔哩视频链接&#xff1a; https://www.bilibili.com…

Python算法于强化学习库之rlax使用详解

概要 在强化学习领域,开发和测试各种算法需要使用高效的工具和库。rlax 是 Google 开发的一个专注于强化学习的库,旨在提供一组用于构建和测试强化学习算法的基础构件。rlax 基于 JAX,利用 JAX 的自动微分和加速计算功能,使得强化学习算法的实现更加高效和简洁。本文将详细…

CPT204 Advanced OO Programming(2)

W5 Lists_stacks_queues_priority queues  To explore the relationship between interfaces and classes in the Java Collections Framework hierarchy.  To use the common methods defined in the Collectioninterface for operating collections.  To use…

⌈ 传知代码 ⌋ ERA-CoT: 实体关系推理

&#x1f49b;前情提要&#x1f49b; 本文是传知代码平台中的相关前沿知识与技术的分享~ 接下来我们即将进入一个全新的空间&#xff0c;对技术有一个全新的视角~ 本文所涉及所有资源均在传知代码平台可获取 以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦&#x…

Xmind导入纯文本TXT方法

最近有很多同事咨询我如何在xmind直接导入纯文本txt笔记或者思维导图呢&#xff1f; 解决办法如下&#xff1a; 1.先打开xmind随便打开一个思维导图-文件-导出-marldown 2.选中导出的markdown文件。右键-打开方式-苹果系统选择文本编辑&#xff0c;Win系统选择记事本 3.按照图示…

Unity动画录制工具在运行时录制和保存模型骨骼运动的方法录制动画给其他角色模型使用支持JSON、FBX等格式

如果您正在寻找一种在运行时录制和保存模型骨骼运动的方法&#xff0c;那么此插件是满足您需求的完美解决方案。 实时录制角色运动 将录制到的角色动作转为动画文件 将录制好的动作给新的角色模型使用&#xff0c;完美复制 支持导出FBX格式 操作简单&#xff0c;有按钮界面…

SpringCache 缓存 - @Cacheable、@CacheEvict、@CachePut、@Caching、CacheConfig 以及优劣分析

目录 SpringCache 缓存 环境配置 1&#xff09;依赖如下 2&#xff09;配置文件 3&#xff09;设置缓存的 value 序列化为 JSON 格式 4&#xff09;EnableCaching 实战开发 Cacheable CacheEvict CachePut Caching CacheConfig SpringCache 的优势和劣势 读操作…

ADS基础教程19 - 电磁仿真(EM)基本概念和实操

EM介绍 一、引言二、基本概念1.EM介绍2.Momentum介绍3.FEM介绍4.Substrate介绍 三、创建Layout并进行Momentum仿真1.创建Layout2.添加Microtrip&#xff08;微带线&#xff09;3.添加Substrate4.Momentum仿真 四、总结 一、引言 本章节开始介绍EM的基本概念、内容以及实现具体…

反向传播算法

在深度学习和神经网络中&#xff0c;反向传播算法是一种至关重要的技术&#xff0c;它使得网络能够通过学习不断调整自身的参数以优化性能。作为训练神经网络的核心机制&#xff0c;反向传播通过计算损失函数对模型参数的梯度&#xff0c;并据此更新网络权重&#xff0c;从而逐…

this关键字,构造函数(构造器)

文章目录 thisthis是什么应用场景 构造器注意事项代码演示 this this是什么 this就是一个变量&#xff0c;可以在方法中&#xff0c;拿到当前对象 应用场景 解决变量名称 冲突问题 构造器 注意事项 必须和类名相同没有返回值只要参数不同&#xff08;个数不同&#xff0…

ISO 26262《道路车辆功能安全》

ISO 26262是关于道路车辆功能安全的国际标准&#xff0c;专门针对总重不超过3.5吨的八座乘用车及其安全相关电子电气系统&#xff08;E/E系统&#xff09;的功能安全而制定。以下是关于ISO 26262的详细解释&#xff1a; 一、背景与目的 ISO 26262是在2011年11月15日正式发布的…

Java基础面试重点-2

21. JVM是如何处理异常&#xff08;大概流程&#xff09;&#xff1f; 如果发生异常&#xff0c;方法会创建一个异常对象&#xff08;包括&#xff1a;异常名称、异常描述以及异常发生时应用程序的状态&#xff09;&#xff0c;并转交给JVM。创建异常对象&#xff0c;并转交给…

UML相关1

汽车租赁系统中的用例图简述(10分) 本系统根据功能可以分为三个用例图&#xff1a; 客户用例图&#xff1a;主要描述客户注册、登录、找回密码、查询车辆信息&#xff08;包括所有车辆信息、已借车辆信息、租赁历史信息&#xff09;、修改个人信息、网上预订车辆、电话预定车…