<!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. 任务系统之Jenkins子任务

    今天下班即开启五一假期,早上临时定了行程去山东日照,原本计划下班就出发,但下班看了看导航,这一路红得发黑,于是决定还是晚点再走,现在有时间了,写篇简单的技术文章来提升下Blog逐渐降低的技术内容含量吧 ...

  2. 【JS逆向】【多图+附源码】 2023 python获取某蜂窝 _sn

    声明:本文/代码/软件/网站等内容仅供学习交流使用,不涉及任何商业目的或利益.如有侵犯版权或其他问题,请联系作者删除.作者对本文/代码/软件/网站等内容的正确性.完整性.可靠性.安全性等不作任何保证, ...

  3. 2021-02-13：字符串str最少添加多少个字符变成回文串？

    福哥答案2020-02-13: 假设字符串str是"abcde12344321",在str后添加"edcba"即可变成回文串.需要添加5个字符. 解法:包含最后 ...

  4. Django中多个app放置同一文件夹中

    在pycharm中新建一个管理app的python package目录:apps 将存在的app用拖拽到apps目录下,此时会弹出对话框,取消勾选Search for references(搜索索引) ...

  5. 40% building 31/38 modules 7 active ...es\core-js\modules\es6.object.assign.jsBrowserslist: caniuse-lite is outdated.

    一早运行项目发现不正常 虽然能运行,但是怎么看都不顺眼啊,那就照着提示先: npm update 一连串下来啥也看不懂是不是 我就直接npm install看看重新下载一下依赖结果直接给我来了个 :c ...

  6. 小H分糖果

    7-5 小H分糖果 (20 分) 小H来到一个小学分糖果,小学生们很听话,站成一排等着分糖果,小H将根据每个人的上次考试分数给一定的糖果,规则如下. 每个人都有自己分数ai​,代表上次考试成绩. 每个 ...

  7. js有关dom操作学习

    dom对象就是操作网页的document dom节点: 整个文档是一个文档节点(document对象) 每个 HTML 元素是元素节点(element 对象) HTML 元素内的文本是文本节点(tex ...

  8. 有管django使用orm 字段报错问题

    直接删除表,重新生成,首先删除:migrations 中,上传记录,然后django_migrations,

  9. Flutter三棵树系列之BuildOwner

    引言 Flutter开发中三棵树的重要性不言而喻,了解其原理有助于我们开发出性能更优的App,此文主要从源码角度介绍Element树的管理类BuildOwner. 是什么? BuildOwner是el ...

  10. 让你的代码动起来:Python进度条神器tqdm详解及应用实例

    各位Python高手,今天我要给大家介绍一个好用的库,它就是:tqdm tqdm在阿拉伯语中的意思是 "进展",所以这个库也被称为 "快速进展条".不得不说,这 ...