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 ...
随机推荐
- 你还弄不清xxxForCausalLM和xxxForConditionalGeneration吗？
Part1基本介绍 大语言模型目前一发不可收拾,在使用的时候经常会看到transformers库的踪影,其中xxxCausalLM和xxxForConditionalGeneration会经常出现在我 ...
- Shell脚本编程（二）
Shell脚本编程(二) shell脚本编程中if.if else的使用以及一些常用到的操作符 if.if else使用方式: 1) if条件 if [ condition ...
- antv x6 神奇的图片边框
昨天才把html节点中的图片转成base格式的,今天就发现一个用户体验的问题:那么是啥呢?就是我从左侧的树形菜单中拖拽节点的时候(鼠标按下也是同样问题),发现节点的图片区域那里会出现一个边框,持续时间 ...
- Python_14 接口测试报告
一.查缺补漏 1. 测试用例要复制到pycharm执行的项目中,才能显示 2. 函数用下划线,类用大驼峰 3. pycharm一行显示(不换行): File -> settings-> E ...
- 【Visual Leak Detector】在 VS 高版本中使用 VLD
说明 使用 VLD 内存泄漏检测工具辅助开发时整理的学习笔记. 本篇介绍如何在 VS 高版本中使用 vld2.5.1.同系列文章目录可见 <内存泄漏检测工具>目录 目录 说明 1. 使用前 ...
- 2021-09-20：给你一个有序数组 nums ，请你 原地 删除重复出现的元素，使每个元素 只出现一次 ，返回删除后数组的新长度。不要使用额外的数组空间，你必须在 原地 修改输入数组 并在使用 O
2021-09-20:给你一个有序数组 nums ,请你 原地 删除重复出现的元素,使每个元素 只出现一次 ,返回删除后数组的新长度.不要使用额外的数组空间,你必须在 原地 修改输入数组 并在使用 O ...
- phpstudy-sqlilabs-less-2
题目:GET - Error based - Intiger based 基于错误的数字型注入 ?id=1 ?id=1 order by 3 ?id=-1 union select 1,2,3 ?id ...
- ES5 apply与call详解
虽然es6已经出台了很多简单的方法替代了apply和call,但是还是有很多老大项目使用到了es5的这些方法,所以对于这些方法的掌握是有必要的 先回顾一下官方对apply.call的诠释 apply方 ...
- flutter填坑之旅（配置本地资源文件）
一.添加单个资源文件 项目下创建一个assets目录,在该目录下存放对应的资源文件(json.image.-) pubspec.yaml文件中配置资源文件路径(注意缩进要与上下文一直) assets: ...
- GroundingDINO（一种开集目标检测算法）服务化，根据文本生成检测框
背景 最近发现一个叫GroundingDINO的开集目标检测算法,所谓开集目标检测就是能检测的目标类别不局限于训练的类别,这个算法可以通过输入文本的prompt然后输出对应的目标框.可以用来做预标注或 ...