<!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. k8s、jenkins集成

    参考连接 http://www.uml.org.cn/jchgj/201804252.asp https://huanqiang.wang/2018/03/30/Jenkins-Gitlab-Kube ...

  2. html5 导航栏切换效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Docker:学习笔记(1)——基础概念

    Docker:学习笔记(1)——基础概念 Docker是什么 软件开发后,我们需要在测试电脑.客户电脑.服务器安装运行,用户计算机的环境各不相同,所以需要进行各自的环境配置,耗时耗力.为了解决这个问题 ...

  4. Andrew Ng机器学习课程9-补充

    Andrew Ng机器学习课程9-补充 首先要说的还是这个bias-variance trade off,一个hypothesis的generalization error是指的它在样本上的期望误差, ...

  5. CentOS 7 搭建 GitLab

    概述 GitLab 是我在日常工作中使用的代码仓库管理系统,它带有非常友好的 Web 界面,并且功能丰富.下面将介绍我在 CentOS 7 上搭建 GitLab 的步骤,以及遇到的一些问题. 关于不同 ...

  6. idea的项目转maven项目

    鼠标右键pom.xml>>>>>> Add as Maven Project

  7. webpack to package typescript & scss

    Demo2操作手册 本Demo演示如何配合各种loader进行稍复杂的使用 准备环境 初始化环境, cd到demo目录之后, 执行如下命令: npm init -y npm install webpa ...

  8. [转帖]libev与libuv的区别

    libev与libuv的区别 https://www.cnblogs.com/charlesblc/p/6341280.html 参考: http://blog.csdn.net/w616589292 ...

  9. java当中JDBC当中的transaction例子

    [学习笔记] 7.jdbc的transaction例子: import java.sql.*; public class MySQlTransaction1 { public static void ...

  10. 列主元消去法&全主元消去法——Java实现

    Gauss.java package Gauss; /** * @description TODO 父类,包含高斯列主元消去法和全主元消去法的共有属性和方法 * @author PengHao * @ ...