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 ...
随机推荐
- Arnold置乱
一.Arnold置乱概述 Arnold变换是俄国数学家弗拉基米尔·阿诺德(Vladimir Igorevich Arnold)提出,Arnold将其应用在遍历理论研究中.由于Arnold本人最初对一张 ...
- 使用select需要注意的细节
使用select需要注意的细节 在学校的时候就使用过select,但是在项目中使用的时候却犯了个错误. select如何使用就不进行总结了,网上教程太多,以下是项目中我写的一小段代码,便于总结. in ...
- boot-admin整合Liquibase实现数据库版本管理
Liquibase 和 Flyway 是两款成熟的.优秀的.开源/商业版的数据库版本管理工具,鉴于 Flyway 的社区版本对 Oracle 数据库支持存在限制,所以 boot-admin 选择整合 ...
- Prism Sample 4 View Discovery
前三节算是弄明白了Region是什么,但是定义了区域,怎样向区域中添加内容呢?内容是UserControl,即ViewA. 添加内容的方式有2种,一种叫View Discovery,一种叫View I ...
- Finalshell
使用VMware可以得到Linux虚拟机,但是在VMware中操作Linux的命令行页面不太方便 1.内容的复制.粘贴跨越VMware不方便 2.文件的上传.下载跨越VMware不方便 3.也就是和L ...
- 2022-02-10：k8s安装mongo，yaml如何写？
2022-02-10:k8s安装mongo,yaml如何写? 答案2022-02-10: yaml如下: apiVersion: v1 kind: Service metadata: labels: ...
- 常用设计模式之.Net示例代码合集
每一次初学者粉丝朋友,在后台向我咨询编程问题,我除了给他们指导学习路线,我都会建议他们学完基础知识后,一定要要注重编程规范,学习设计模式,修炼内功. 虽然说很多程序员,他们日常主要工作是CRUD,但是 ...
- C# 实现 Linux 视频会议（源码，支持信创环境，银河麒麟，统信UOS）
信创是现阶段国家发展的重要战略之一,面对这一趋势,所有的软件应用只有支持信创国产化的基础软硬件设施,在未来才不会被淘汰.那么,如何可以使用C#来实现支持信创环境的视频会议系统吗?答案是肯定的. 本文讲 ...
- 在程序里如何停止整个python项目的运行
我们的项目无可避免的会遇到一些场景,当出现某个故障或者异常,必须停止整个项目的运行,这时只需要在抛出的异常里执行以下即可: os._exit(0)
- ubuntu配置vscode全过程（下载安装配置优化插件）
一.安装vscode 下载vscode 当然啦,我们安装vscode,当然要先下载啦,但是但是但是!不要在ubuntu的软件中心(Ubuntu Software)下载!贼坑!下载完不能用! 推荐下载方 ...