【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.mzph.cn/bicheng/26398.shtml

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

相关文章

Oracle数据库查询常用语句

Oracle数据库查询常用语句 文章目录 Oracle数据库查询常用语句一、时间查询1、查询当天得数据 二、 一、时间查询 1、查询当天得数据 1、字段名为PLAN_DAY&#xff0c;字段类型为DATE 使用SYSDATE函数来获取当前日期&#xff0c;并且使用比较运算符来过滤出当天的记录。Oracle…

R语言ggHoriPlot包绘制地平线图

数据和代码获取&#xff1a;请查看主页个人信息&#xff01;&#xff01;&#xff01; 关键词“地平线图” 1. 数据读取与处理 首先&#xff0c;从TSV文件中读取数据&#xff0c;并进行数据清洗和处理。 rm(listls()) pacman::p_load(tidyverse,ggalt,ggHoriPlot,hrbrthemes…

教程:A5000 GPU 上运行阿里最新开源大模型 Qwen2

这是我们新一篇关于大模型的文章&#xff0c;我们此前还讲过如何运行 LLama3 大模型。而这次&#xff0c;我们将使用 Ollama 运行阿里千问Qwen2:7b。要知道 Qwen2 可是目前最热门的开源大语言模型了&#xff0c;甚至在一些性能测试中比 LLama3 表现还突出。谁不想试试看呢&…

创建FileInputStream对象不使用filePath,而是用字节流数组,怎么改

改之前 fileInputStream new FileInputStream(new File(filePath)); fileReader new PdfReader(fileInputStream); fileDocunment new PdfDocument(fileReader);改之后 如果你有一个字节流数组&#xff08;byte array&#xff09;而不是文件的路径&#xff0c;并且你想要使…

C#下WinForm多语种切换

这是应一个网友要求写的&#xff0c;希望对你有所帮助。本文将介绍如何在一个WinForm应用程序中实现多语种切换。通过一个简单的示例&#xff0c;你将了解到如何使用资源文件管理不同语言的文本&#xff0c;并通过用户界面实现语言切换。 创建WinForm项目 打开Visual Studio&a…

最新下载:XmanagerXShell【软件附加安装教程】

​XManager企业版是一款完整的企业网络连接套件&#xff0c;它配备了一个高性能的PC服务器&#xff0c;安全终端模拟器&#xff0c;是一个一体化的解决方案&#xff0c;将xmanager&#xff0c;xshell&#xff0c;xftp&#xff0c;xlpd&#xff0c;Xbrowser及xstart放置在一个软…

代码随想录算法训练营DAY37| 56. 合并区间、738.单调递增的数字、968.监控二叉树、总结

56.合并区间 题目链接&#xff1a;56. 合并区间 class Solution(object):def merge(self, intervals):""":type intervals: List[List[int]]:rtype: List[List[int]]"""intervals.sort(key lambda x:x[0])i0while i<len(intervals)-1:if i…

C#发送邮件

C#发送邮件代码&#xff0c;亲测可用。 using System; using System.Net; using System.Net.Mail;namespace MailSend {class Program{static void Main(string[] args){try{MailAddress receiver new MailAddress("666666666qq.com");//666666666qq.com 换成收件人…

前端面试题日常练-day66 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末 TypeScript中&#xff0c;以下哪个关键字用于声明一个类的静态属性或方法&#xff1f; a) static b) const c) let d) final 在TypeScript中&#xff0c;以下哪个符号用于声明一个变量的类型为任意类…

从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战十(整体布局03之界面美化)

删除style.css 删除style.css(和main.ts同级) 并且注释掉main.ts中对style.css的导入。 修改App.vue 添加样式设置高度100% 安装sass pnpm install -D sass修改PageSidebar.vue 修改index.vue 修改src/layout/index.vue src/layout/index.vue添加样式 <style lang&quo…

09_探索时间序列的秘密:重新理解LSTM网络

1.1 简介 LSTM&#xff0c;全称为长短期记忆网络&#xff08;Long Short-Term Memory&#xff09;&#xff0c;是一种特殊的循环神经网络&#xff08;RNN&#xff09;结构&#xff0c;由Sepp Hochreiter和Jrgen Schmidhuber在1997年提出。它的设计初衷是为了克服传统RNN在处理…

tmega128单片机控制的智能小车设计

第1章 绪论1.1 选题背景和意义 自第一台工业机器人诞生以来,机器人的民展已经遍及机械、电子、冶金、交通、宇航、国防等领域。近年来机器人的智能水平不断提高,并且迅速地改变着人们的生活方式。人们在不断探讨、改造、认识自然的过程中,制造能替代人工作的机器一…

等保测评考试初级题大题部分

主机安全问答&#xff1a; 在主机安全测评前期调研活动中&#xff0c;收集信息的内容&#xff08;至少写出六项&#xff09;&#xff1f; 在选择主机测评对象时应该注意哪些要点&#xff1f; 主机安全回答&#xff1a; 至少需要收集服务器主机的设备名称、型号、所属网络区…

Linux常用基本命令-操作

目录 一、shell 1、什么是shell 二、Linux基本的命令分类 1、内部命令和外部命令 2、查看内部命令 2.1、help命令 2.2、enable 命令 2.3、type命令 2.4、whereis命令 2.5、which 命令 2.6、hash缓存 ​编辑 三、Linux常用命令 1、Linux命令格式 2、编辑Linux命…

服务端渲染 SSR 原理和实现

文章目录 CSR 优缺点SSRServer Client 同构Hydrate 水合&#xff08;客户端激活&#xff09;数据的获取和初始化预加载资源避免应用单例避免全局副作用代码 CSR 优缺点 优点 整个网站打包进 JavaScript 里&#xff0c;当 JavaScript 下载完毕后&#xff0c;相当于网站的页面…

技术流 | ClickHouse工具ckman v3.1.3 sinker v3.1.8 版本发布

【本文作者&#xff1a;擎创科技 ClickHouse专家&#xff0c;ckman作者禹鼎侯】 在这个端午小长假里&#xff0c;ckman和clickhouse_sinker分别带来了全新的版本。让我们一起来看看&#xff0c;新版本都有哪些新特性吧&#xff01; ckman v3.1.3新版本特性 ckman v3.1.3作为…

磁盘挂载lvm

新拿到一个主机,挂载磁盘,但是之前实在是没做过,这里也算是学了点东西,挂载分pv vg lv这些,这里第一个坑就是直接挂载这个后续没办法扩容,如果挂载的盘上装的数据库那就惨了,只能把数据迁移走再扩容了,下面是可扩容的操作建议全部按下面的步骤来。 查看磁盘 vdb盘就是…

加强设备管理:信息系统与日常运维的深度融合

在当今这个信息化高速发展的时代&#xff0c;企业信息系统的稳定运行至关重要。设备作为信息系统的硬件基础&#xff0c;其性能和健康状况直接影响到整个信息系统的可靠性和效率。因此&#xff0c;加强设备管理&#xff0c;将各信息系统和日常运维工作紧密结合&#xff0c;定期…

3D场景的交互设计有什么软件吗?

需求&#xff1a;类似于游戏那样在3D房间内&#xff0c;能通过鼠标或键盘操作在房间里自由行走。 对于3D场景的交互设计&#xff0c;尤其是像设计一间房间并允许用户在其中自由行走这样的需求&#xff0c;以下几款软件应该会适合&#xff1a; 1、博维数孪&#xff1a;专业从事…

Rust在前端领域有哪些应用?

​ 随着技术的飞速发展&#xff0c;编程语言的选择对项目的影响日益重要。Rust作为一种新兴的编程语言&#xff0c;以其独特的性能和安全性优势&#xff0c;开始在前端领域崭露头角。 1. 高性能的WebAssembly&#xff1a;Rust可以编译成WebAssembly&#xff0c;这是一种可以在…