<!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实现记事本功能的更多相关文章

  1. Delphi Memo的记事本功能

    Delphi Memo的记事本功能           下载地址 : http://download.csdn.net/detail/teststudio/6412883 这个代码实现了Windows ...

  2. Vue.js 基本功能了解

    一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...

  3. Vue.js 基本功能了解一下~

    一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...

  4. 【Android】12.6 利用Intent实现记事本功能（NotePad）

    分类:C#.Android.VS2015: 创建日期:2016-02-23 一.简介 这个例子演示如何实现一个简单的记事本功能. 该例子提前使用了后面章节将要介绍的SQLLite数据库. 二.示例-c ...

  5. JAVA 运用流编程实现简单的"记事本"功能

    一.概要 1.功能介绍 2.实现的思路及步骤代码 3.完整代码 二.功能 运用IO流和Swing实现简单的记事本功能(打开.保存.退出) 三.思路及实现步骤 1.在构造函数中画出操作界面 //创建jt ...

  6. Vue实现上传图片功能

    前言: 用vue实现上传图片功能,效果图如下: 先说文件上传控件样式美化怎么做,我有两种方法. 1.先上代码 html部分: <div class="pics-wrapper" ...

  7. vue实现搜索功能

    vue实现搜索功能 template 部分 <!-- 搜索页面 --> <template> <div> <div class="goback&qu ...

  8. 使用.Net Core+IView+Vue集成上传图片功能

    最近的项目里有上传图片的功能,当然这个功能在项目里是必须要有的,那么目前这个项目是使用完全的前后端分离,在选择文件上传的组件中还是选择了全面支持Vue的IView,任何上传图片都是通过HTTP请求,服 ...

  9. vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...

  10. vue实战记录（六）- vue实现购物车功能之地址列表选配

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...

随机推荐

  1. 大规模 Transformer 模型 8 比特矩阵乘简介 - 基于 Hugging Face Transformers、Accelerate 以及 bitsandbytes

    引言 语言模型一直在变大.截至撰写本文时,PaLM 有 5400 亿参数,OPT.GPT-3 和 BLOOM 有大约 1760 亿参数,而且我们仍在继续朝着更大的模型发展.下图总结了最近的一些语言模型 ...

  2. Prometheus-Operator使用ServiceMonitor监控配置时遇坑与解决总结

    摘要 本文范围: Prometheus-Operator & kube-prometheus 安装:以及在解决使用ServiceMonitor时遇到的坑. Prometheus Operato ...

  3. Visual Basic 6 API压缩数据

    Private Declare Sub CopyMemory Lib "kernel32" Alias "RtlMoveMemory" (hpvDest As ...

  4. 通过空间占用和执行计划了解SQL Server的行存储索引

    1 索引介绍 索引是一种帮助查询语句能够快速定位到数据的一种技术.索引的存储方式有行存储索引.列存储索引和内存优化三种存储方式: 行存储索引,使用B+树结构,行存储指的是数据存储格式为堆.聚集索引和内 ...

  5. 2023-01-01：remix-ide是浏览器的ide，官方已经提供地址，但是需要连接外网。如果是内网，需要自己在服务器里搭建remix-ide；另一种方式是用remix-ide的桌面版。这里只讨论

    2023-01-01:remix-ide是浏览器的ide,官方已经提供地址,但是需要连接外网.如果是内网,需要自己在服务器里搭建remix-ide:另一种方式是用remix-ide的桌面版.这里只讨论 ...

  6. 2020-11-19：go中，defer原理是什么？

    福哥答案2020-11-19:- - 什么是defer - defer是go语言提供的一种用于注册延迟调用的机制:让函数或者语句在当前函数执行完毕(包括return正常结束或者panic导致的异常结束 ...

  7. 2020-11-26：go中，map的创建流程是什么？

    福哥答案2020-11-26: [答案来自此链接:](https://www.bilibili.com/video/BV1Nr4y1w7aa?p=10)源码位于runtime/map.go文件中的ma ...

  8. 2021-09-21：给定一个按照升序排列的整数数组 nums，和一个目标值 target。找出给定目标值在数组中的开始位置和结束位置。如果数组中不存在目标值 target，返回 [-1, -1]。要

    2021-09-21:给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置.如果数组中不存在目标值 target,返回 [-1, -1].要 ...

  9. Python获取当前时间、获取当月第一天、最后一天日期等方法

    ```python先导入包: import calendarimport datetimefrom datetime import timedelta获取今天日期: #返回datetime格式:eg: ...

  10. Vue 路由router

    简单案例: App.vue是核心组件,其中的<router-link>相当于a标签,to相当于href,export是暴露函数,这样某组件才能被其他组件识别到 代码: <templa ...