<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue 入门</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

    <div id="app">
        <div>
            <input type="text" v-model="inputValue">
            <button @click="add">提交</button>
        </div>
        <ul>
            <li v-for="(item,index) in list" :key="index" @dblclick="del(index)"> {{ item }}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                inputValue:'',
                list:[]
            },
            methods:{
                add() {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                del(index){
                    )
                }
            }

        })

    </script>
</body>
</html>

vue简单todolist的更多相关文章

  1. 一篇文章带你了解网页框架——Vue简单入门

    一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...

  2. vue demo todo-list

    html <input type='text' v-model="todoItem" v-on:keyup.enter='addItem'> <ul> &l ...

  3. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  4. vue简单实现

    vue简单实现 vue的三个核心 虚拟dom, 双向绑定 Proxy,

  5. vue 实现todolist，包含添加，删除，统计，清空，隐藏功能

    vue 实现todolist,包含添加,删除,统计,清空,隐藏功能 添加:生成列表结构(v-for+数组).获取用户输入(v-model).通过回车新增数据(v-on+.enter) 删除:点击删除指 ...

  6. html vue简单

    1.Vue 简单的替换更新 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  7. Vue完成TodoList案例

    写一个简单的TodoList的更实用(文末有彩蛋). 一,使用VUE-CLI脚手架快速搭建一个框架 利用VUE-CLI来自动生成我们项目的前端目录及文件,方法: npm install -g vue- ...

  8. vue - Vue脚手架/TodoList案例

    今天做了一个案例,可以好好做做能够将之前的内容结合起来,最主要的是能对组件化编码流程有一个大概的清晰认知,这一套做下来,明天自己再做一遍复习一下,其实组件化流程倒是基本上没什么问题了,主要是很多vue ...

  9. vue初学实践之路——vue简单日历组件(1)

    ---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...

随机推荐

  1. 报错：java.lang.ClassNotFoundException: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException

    1.创建mysql_link的时候一定要注意是不是多加了空格: 2.检查Sqoop是否引入了jdbc的jar包.

  2. Java使用Jsoup获得新闻联播所有文字稿

    Jsoup的maven坐标: <!-- https://mvnrepository.com/artifact/org.jsoup/jsoup --> <dependency> ...

  3. 安卓微信overflow-x overflow-y引发的bug

    今天xgo文章图片页上线用微信扫页面发现一个bug,页面可以双击放大缩小. 找了半天原因,发现是图片描述设置了overflow-y引发的bug. 建议在微信场景里满屏显示不能滚动的页面里慎用overf ...

  4. [LeetCode] 855. Exam Room 考场

    In an exam room, there are N seats in a single row, numbered 0, 1, 2, ..., N-1. When a student enter ...

  5. AI - TensorFlow - 示例04：过拟合与欠拟合

    过拟合与欠拟合(Overfitting and underfitting) 官网示例:https://www.tensorflow.org/tutorials/keras/overfit_and_un ...

  6. 【VS开发】开发最小化到托盘的功能

    在VC++中,想实现最小化MFC程序的时候,最小化到系统托盘,需要调用NOTIFYICONDATA类 下面我们就来讲解一下如何简单实现一个系统托盘我们以对话框程序为列 第一步:在Dlg类中//定义一个 ...

  7. WCF之Windows宿主(可安装成服务自动并启动)

    WCF之Windows宿主(可安装成服务自动并启动) 创建解决方案WCFServiceDemo 创建WCF服务库(类库或WCF服务库)WCFService  ,添加引用System.ServiceMo ...

  8. 【转帖】如果进入CPU的世界，时间会是怎样的？

    如果进入CPU的世界,时间会是怎样的? 2018-02-26 20:52:46 world6 阅读数 1295更多 分类专栏: 网络 缓存服务 架构   版权声明:本文为博主原创文章,遵循CC 4.0 ...

  9. Java基础---Java 数组

    数组概念: 数组就是存储数据长度固定的容器,保证多个数据的数据类型要一致. 数组的定义 格式:数组定义格式详解: 数组存储的数据类型: 创建的数组容器可以存储什么数据类型. [] : 表示数组. 数组 ...

  10. Java设计模式：23种设计模式（转）

    单例(Singleton)模式:某个类只能生成一个实例,该类提供了一个全局访问点供外部获取该实例,其拓展是有限多例模式. 原型(Prototype)模式:将一个对象作为原型,通过对其进行复制而克隆出多 ...