<!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="vue.js"></script>

</head>

<body>

    <!-- todolist功能开发

     -->

    <div id="root">

        <div>

            <input v-model="inputValue" />

            <button @click="handleSubmit">提交</button>

        </div>

        <ul>

            <li v-for="(item, index) of list" :key="index">

                {{item}}

            </li>

        </ul>

    </div>

    <script>

        new Vue({

            el:"#root",

            data:{

                inputValue: 'hello',

                list: []

            },

            methods: {

                handleSubmit: function() {

                    this.list.push(this.inputValue)

                    this.inputValue = ''

                }

            }

        })

    </script>

</body>

</html>

Vue学习之todolist功能开发的更多相关文章

  1. Todolist功能开发

    一.属性绑定和双向数据绑定: v-bind:title 或简写成 :title实现title属性绑定: v-model实现双向数据绑定(双向是指:当数据变了,input的value会改变:当input ...

  2. Vue学习笔记(五)——配置开发环境及初建项目

    前言 在上一篇中,我们通过初步的认识,简单了解 Vue 生命周期的八个阶段,以及可以应用在之后的开发中,针对不同的阶段的钩子采取不同的操作,更好的实现我们的业务代码,处理更加复杂的业务逻辑. 而在这一 ...

  3. SpringMVC学习记录四——功能开发及参数绑定

    9       商品修改功能开发 9.1      需求 操作流程: 1.进入商品查询列表页面 2.点击修改,进入商品修改页面,页面中显示了要修改的商品(从数据库查询) 要修改的商品从数据库查询,根据 ...

  4. Vue学习之todolist删除功能

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

  5. 3-1 todolist功能开发

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

  6. Vue学习之todolist组件拆分

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

  7. vue学习【一、开发环境搭建】

    一.安装node.js https://nodejs.org/en/ 建议安装LTS版本 安装完毕之后cmd命令查看node版本,如果不识别,记住设置环境变量 显示上面信息则安装成功 二.设置node ...

  8. SpringMVC学习记录五——功能开发及参数处理

    15       包装类型pojo参数绑定 15.1      需求 商品查询controller方法中实现商品查询条件传入. 15.2      实现方法 第一种方法:在形参中 添加HttpServ ...

  9. IOS开发－OC学习－常用功能代码片段整理

    IOS开发-OC学习-常用功能代码片段整理 IOS开发中会频繁用到一些代码段,用来实现一些固定的功能.比如在文本框中输入完后要让键盘收回,这个需要用一个简单的让文本框失去第一响应者的身份来完成.或者是 ...

随机推荐

  1. odoo通过actions.client进行自定义页面

    一.使用原因 由于odoo自带页面在项目开发过程中无法满足使用,需要使用到动作ir.actions.client进行自定义视图的开发,实现自定义的xml视图开发. 二.实现目标 三.开发过程 1.项目 ...

  2. Github资源下载

    自己收集的一些日常使用软件.编程书籍以及自己动手实践的程序,欢迎下载. 收集维护不易,喜欢请Star或Fork支持呀,(^-^)V. 所有资源均自己制作或收集自网络,如有侵权请联系删除. 友情链接 G ...

  3. 第一篇 特征提取以及openvslam中的相关实现详解

    参考尺度空间理论 金字塔 当用一个机器视觉系统分析未知场景时,计算机没有办法预先知道图像中物体尺度,因此,我们需要同时考虑图像在多尺度下的描述,获知感兴趣物体的最佳尺度.所以在很多时候,我们会在将图像 ...

  4. Anaconda的详细安装步骤图文并茂

    Anaconda(官方网站)就是可以便捷获取包且对包能够进行管理,同时对环境可以统一管理的发行版本.Anaconda包含了conda.Python在内的超过180个科学包及其依赖项. 事实上Anaco ...

  5. Agentless监控实践中的预警指标采集

    很多公司已经开发了监控解决方案,解决了指标收集.展示.预警发送等一系列问题. 本文介绍的监控解决方案由高性能时序数据库InfluxDB.时序分析监控工具Grafana及Agentless自动化工具An ...

  6. 关于turtle画蟒蛇小实例

    import turtle turtle.setup(800,600) turtle.pensize(25) turtle.pencolor('blue') turtle.penup() #抬笔 tu ...

  7. codeforces 830 B. Cards Sorting（线段树）

    题目链接:http://codeforces.com/contest/830/problem/B 题解:其实这题就是求当前大小的数到下一个大小的数直接有多少个数,这时候可以利用数据结构来查询它们之间有 ...

  8. Codeforces Round #484 (Div. 2) B. Bus of Characters（STL+贪心）982B

    原博主:https://blog.csdn.net/amovement/article/details/80358962 B. Bus of Characters time limit per tes ...

  9. 阿里巴巴资深技术专家雷卷：值得开发者关注的 Java 8 后时代的语言特性

    作者 | 阿里巴巴资深技术专家  雷卷,GitHub ID @linux-china 导读:在 Python.JavaScript 等一众编程语言崛起风靡之际,一代霸主 Java 风采虽不及当年,但仍 ...

  10. Oracle sqlldr 在DOS窗口导入多列数据到数据库表

    sqlldr 用法详见:https://www.cnblogs.com/rootq/archive/2009/03/01/1401061.html 测试内容: 1.创建数据库表: create tab ...