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 ...
随机推荐
- vue中使用svg并设置大小
1.安装依赖 npm install --save-dev svg-sprite-loader 2. 新建svg资源文件夹 src/assets/svg 将svg资源放入此目录,接下来会在配置 ...
- Python 持久化-文件
文件 长久保存信息的一种数据信息集合 常用操作 打开关闭(文件一旦打开,需要关闭操作) 读写内容 查找 open函数 open函数负责打开文件,带有很多参数 第一个参数: 必须有,文件的路径和名称 m ...
- [OpenCV-Python] 10 图像上的算术运算
文章目录 OpenCV-Python: 核心操作 10 图像上的算术运算 10.1 图像加法 10.2 图像混合 10.3 按位运算 OpenCV-Python: 核心操作 10 图像上的算术运算 目 ...
- 案例分享-full gc导致k8s pod重启
在之前的记一次k8s pod频繁重启的优化之旅中分享过对于pod频繁重启的一些案例,最近又遇到一例,继续分享出来希望能给大家带来些许收获. 问题现象 报警群里突然显示某pod频繁重启,我随即上去查看日 ...
- Visual Basic 6 API压缩数据
Private Declare Sub CopyMemory Lib "kernel32" Alias "RtlMoveMemory" (hpvDest As ...
- 数据挖掘实践（金融风控）：金融风控之贷款违约预测挑战赛（上篇）[xgboots/lightgbm/Catboost等模型]--模型融合：stacking、blending
数据挖掘实践(金融风控):金融风控之贷款违约预测挑战赛(上篇)[xgboots/lightgbm/Catboost等模型]--模型融合:stacking.blending 1.赛题简介 赛题以金融风控 ...
- ICML 2017-Model-Agnostic Meta-Learning for Fast Adaptation of Deep Networks
Key Gradient Descent+TRPO+policy Gradient 训练模型的初始参数,模型在新任务上只需参数通过一个或多个用新任务的少量数据计算的梯度步骤更新后,就可以最大的性能.而 ...
- golang 包管理
- 值得推荐的Blazor UI组件库
前言 本文主要是推荐一些开源.免费.实用.美观的Blazor UI组件库,提供给广大C#/.NET开发者们学习和使用(注意:排名不分先后,都是十分优秀的开源框架和项目).本文中的所有框架都已经收录到适 ...
- R 语言画图中英文字体解决方案
在某些时候,需要在 R 画图中添加中文,但是默认情况下,R 对中文的支持不好.这里推荐一个showtext的 R 包.如果需要将含有中文字体的图形保存为 pdf 文件,可以使用下面讲到的方案,最新版的 ...