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 ...
随机推荐
- vue2中使用composition-api
vue2中使用composition-api https://juejin.cn/post/6874927606820274184 vue3.0 watch 函数 https://www.jiansh ...
- node服务端
一,node起服务+数据交互+中间件 什么是node express koa node是js在后端运行时的一个环境 express,koa是基于node的框架,快速构建web应用 前后端交互方式 1. ...
- 2023-02-16：两种颜色的球，蓝色和红色，都按1～n编号，共计2n个， 为方便放在一个数组中，红球编号取负，篮球不变，并打乱顺序， 要求同一种颜色的球按编号升序排列，可以进行如下操作： 交换相邻
2023-02-16:两种颜色的球,蓝色和红色,都按1-n编号,共计2n个, 为方便放在一个数组中,红球编号取负,篮球不变,并打乱顺序, 要求同一种颜色的球按编号升序排列,可以进行如下操作: 交换相邻 ...
- 2022-09-14:以下go语言代码输出什么？A：0 0；B：0 1；C：1 1；D：1 0。 package main func main() { println(f(1)) } func
2022-09-14:以下go语言代码输出什么?A:0 0:B:0 1:C:1 1:D:1 0. package main func main() { println(f(1)) } func f(x ...
- 2021-05-29：最常使用的K个单词II。在实时数据流中找到最常使用的k个单词，实现TopK类中的三个方法: Top
2021-05-29:最常使用的K个单词II.在实时数据流中找到最常使用的k个单词,实现TopK类中的三个方法: TopK(k), 构造方法.add(word),增加一个新单词.topk(),得到当前 ...
- Python实现XSS扫描
利用Python代码实现XSS检测 import requests # HTML转换实体字符 def str_html(source): result = "" for c in ...
- Go编程快闪之 logrus日志库
战术卧倒 golang中常见的日志包是logrus, 根据logrus的胚子和我们的生产要求,给出一个生产可用的logrus实践姿势. 主谓宾定状补 logrus是一个结构化的.可插拔的.兼容gola ...
- ES5 apply与call详解
虽然es6已经出台了很多简单的方法替代了apply和call,但是还是有很多老大项目使用到了es5的这些方法,所以对于这些方法的掌握是有必要的 先回顾一下官方对apply.call的诠释 apply方 ...
- 在vue 项目中嵌入jsp页面
今日一个项目中一块功能模块是其他系统使用jsp已经开发好的页面,想着直接将其嵌入到当前的vue项目中节约开发成本:但是发现并非想象的那么简单 创建一个server.vue组件加载jsp页面 1 .第一 ...
- chess草稿（附代码！）
2022/8/12日过了,代码如下:(已删除调试语句,保留注释,为了使代码更容易看懂并没有卡常.卡完常的代码不是给人看的) 点击查看代码 /* 倒序操作+合并连通块+维护集合,支持合并.区间查询+线段 ...