<!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. DRBD UpToDate/DUnknown 故障恢复

    故障如下: root@drbd1:~# drbd-overview 0:data/0 StandAlone Primary/Unknown UpToDate/DUnknown /data/mysql ...

  2. Linux记录-mysql参数优化

    1.参数优化show variables like ''/etc/my.cnf[mysqld]Max_connections =1024 #请求的最大连接数back_log =1024 #mysql能 ...

  3. python文件之间变量和函数的 获取/调用 的方法

  4. intellij maven配置与使用

    目录 intellij maven配置与使用 Maven 常用设置介绍 Maven 骨架创建 Java Web 项目 Maven 组件来管理项目 @(目录) intellij maven配置与使用 M ...

  5. SVN还原项目到某一版本（转）

    将本地的项目通过SVN还原到某一版本,并将SVN服务器上的项目也还原到这一版本 第一步:新建一个文件夹,如test,选中test右键-checkout到最新版本 第二步:选中test,右键-Torto ...

  6. ubuntu18.04安装flat-remix-gnome主题

    flat-remix-gnome主题的github地址:https://github.com/daniruiz/flat-remix-gnome ubuntu下进行如下操作: sudo add-apt ...

  7. spaces的坑

    spacemacs的坑,改镜像源,不能使用退格 emacs25以上可以装spacemacs 目前在mac上装emacs26.1 使用spacemacs的时候会有melpa.org访问慢或者访问不了的问 ...

  8. orleans 的一种模式

    为了避免过热的grain,按时间%cpu数,分派任务到grain中,然后有限制的去访问原来过热的grain.eg:tokengrain,1个半小时后,更新所有的grain.

  9. 【Gstreamer开发】TI嵌入式处理器GStreamer pipeline

    Example GStreamer Pipelines From Texas Instruments Embedded Processors Wiki Jump to: navigation, sea ...

  10. 在Django中template遇到 "context must be a dict rather

    原代码: # 使用模板文件 # 1.加载模板文件,获取一个模板文件 temp = loader.get_template('booktest/index.html') # 2.定义模板上下文:给模板文 ...