2021-7-6 Vue实现记事本功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="newValue" @keyup.enter="add" placeholder="你好">
<ul>
<li v-for="(item,index) in list">
{{index+1}}{{item}}<input type="button" value="删除" @click="remove(index)">
</li>
</ul>
<div v-show="list.length!=0">{{list.length}}<input type="button" value="清空" @click="clearAll"></div>
</div> <script>
new Vue({
el: '#app',
data: {
list:["你好","哈哈","卧槽"],
newValue:'好好学习，天天向上',
index:0
},
methods:{
add:function(){
this.list.push(this.newValue);
},
remove:function(index){
console.log("删除");
this.list.splice(index,1);
},
clearAll:function(){
this.list=[];
}
}
})
</script>
</body>
</html>
2021-7-6 Vue实现记事本功能的更多相关文章
- Delphi Memo的记事本功能
Delphi Memo的记事本功能 下载地址 : http://download.csdn.net/detail/teststudio/6412883 这个代码实现了Windows ...
- Vue.js 基本功能了解
一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...
- Vue.js 基本功能了解一下~
一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...
- 【Android】12.6 利用Intent实现记事本功能（NotePad）
分类:C#.Android.VS2015: 创建日期:2016-02-23 一.简介 这个例子演示如何实现一个简单的记事本功能. 该例子提前使用了后面章节将要介绍的SQLLite数据库. 二.示例-c ...
- JAVA 运用流编程实现简单的"记事本"功能
一.概要 1.功能介绍 2.实现的思路及步骤代码 3.完整代码 二.功能 运用IO流和Swing实现简单的记事本功能(打开.保存.退出) 三.思路及实现步骤 1.在构造函数中画出操作界面 //创建jt ...
- Vue实现上传图片功能
前言: 用vue实现上传图片功能,效果图如下: 先说文件上传控件样式美化怎么做,我有两种方法. 1.先上代码 html部分: <div class="pics-wrapper" ...
- vue实现搜索功能
vue实现搜索功能 template 部分 <!-- 搜索页面 --> <template> <div> <div class="goback&qu ...
- 使用.Net Core+IView+Vue集成上传图片功能
最近的项目里有上传图片的功能,当然这个功能在项目里是必须要有的,那么目前这个项目是使用完全的前后端分离,在选择文件上传的组件中还是选择了全面支持Vue的IView,任何上传图片都是通过HTTP请求,服 ...
- vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...
- vue实战记录（六）- vue实现购物车功能之地址列表选配
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...
随机推荐
- C# 反射 判断类型是否是列表
1 /// <summary> 2 /// 判断类型是否为可操作的列表类型 3 /// </summary> 4 /// <param name="type&q ...
- 解密Prompt系列6. lora指令微调扣细节-请冷静,1个小时真不够~
上一章介绍了如何基于APE+SELF自动化构建指令微调样本.这一章咱就把微调跑起来,主要介绍以Lora为首的低参数微调原理,环境配置,微调代码,以及大模型训练中显存和耗时优化的相关技术细节 标题这样写 ...
- Centos环境下部分中间件“rabbitmq、rocketmq、clickhouse”部署
部分中间件部署 目录 部分中间件部署 docker部署rabbitmq docker部署rocketmq 单机部署clickhouse docker部署rabbitmq # 拉镜像 docker pu ...
- springboot 多环境配置及配置文件的位置
了解即可
- NIST SP 800-37 Risk Management Framework for Information Systems and Organizations A System Life Cycle Approach for Security and Privacy
NIST SP 800-37 Risk Management Framework for Information Systems and Organizations A System Life Cyc ...
- NeRF(Neural Radiance Fields)神经辐射场方法 学习总结
最近需要写一篇关于NeRF的文献综述,看了看网上有关NeRF的所有教程和笔记,感觉对于初入门的初学者并不是很友好,在这里开个坑,准备更新NeRF的知识和相关的论文 综述如下: 神经辐射场在视图合成和三 ...
- 客户线上反馈：从信息搜集到疑难 bug 排查全流程经验分享
写在前面:本文是我在前端团队的第三次分享,应该很少会有开发者写客户反馈处理流程以及 bug 排查的心得技巧,全文比较长,写了一个多星期大概1W多字(也是我曾经2年工作的总结),如果你有耐心阅读,我相信 ...
- .NET Core 程序实现 Windows 系统 Development、Staging、Production 三种环境的无感部署
〇.前言 日常开发中,程序的环境切换是相当频繁的了,如果不同环境中的某些参数不同,那就需要每次编辑之前手动进行修改,比较麻烦,效率低下. 本文将以 .NET Core WebAPI 项目的配置方法为例 ...
- 包含引用类型字段的自定义结构体，能作为map的key吗
1. 引言 在 Go 语言中,map是一种内置的数据类型,它提供了一种高效的方式来存储和检索数据.map是一种无序的键值对集合,其中每个键与一个值相关联.使用 map 数据结构可以快速地根据键找到对应 ...
- @SuppressWarnings注解的使用
Java编译器在编译代码时,会产生一些安全警告信息.如果被@SuppressWarnings注解标记的元素,就可以告诉编译器抑制指定的警告. 先看看@SuppressWarnings注解在Java S ...