<!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. iOS学习——iOS 宏(define)与常量(const)的正确使用

    概述 在iOS开发中,经常用到宏定义,或用const修饰一些数据类型,经常有开发者不知怎么正确使用,导致项目中乱用宏与const修饰.你能区分下面的吗?知道什么时候用吗? #define HSCode ...

  2. JS 一些有意思的写法

    对于 C语言中的 &&(有一个为假,返回的为false) 和 || (有一个为真,即为真),但是对于 JS中的 && 和 || 运算是有所不同的. 详情见下面: &am ...

  3. UnityScript基础

    基本格式 1 cc.Class({ 2 extends: cc.Component, 3 4 properties: { 5 }, 6 7 // use this for initialization ...

  4. WTM重磅更新，LayuiAdmin and more

    从善如登,从恶如崩.对于一个开发人员来说,那就是做一个好的系统不容易,想搞砸一个系统很简单,删库跑路会还不会么. 对于我们开源框架的作者来说,做一个好的框架就像登山(也许是登天),我们一步一步往上走, ...

  5. Redis各数据结构常用命令

    redis 通用API keys * 遍历所有key 一般不在生产环境中使用 redis单线程,容易阻塞其他命令执行 O(n) dbsize 计算key的总数 O(1)exists 检查key是否存在 ...

  6. CF 1206D - Shortest Cycle Floyd求最小环

    Shortest Cycle 题意 有n(n <= 100000)个数字,两个数字间取&运算结果大于0的话连一条边.问图中的最小环. 思路 可以发现当非0数的个数很大,比如大于200时, ...

  7. 【EDU68 E】 Count The Rectangles 数据结构算几何

    CF # 题意 总共有5000条线段,这些线段要么水平,要么垂直,问这些线段组成了多少矩形. # 思路 这是一个n*n*(log)的思路 自己一开始想着枚举两条垂直边,想着怎么把水平的边插入,再进行冗 ...

  8. codeforces 873 D. Merge Sort（分治）

    题目链接:http://codeforces.com/contest/873/problem/D 题解:这题挺简单的,除了一开始算作是调用到一次,然后每次执行操作时都会调用2次,所以最多调用几次就很好 ...

  9. Java复习笔记(一):概念解释和运行步骤

    一.java的一些概念 JAVA语言分为三:java ee,java se,java me java se:  java标准版,java的核心功能所在 java ee: java企业级开发,包含ser ...

  10. C#开发BIMFACE系列25 服务端API之获取模型数据10：获取楼层对应面积分区列表

    系列目录     [已更新最新开发文章,点击查看详细] 在<C#开发BIMFACE系列22 服务端API之获取模型数据7:获取多个模型的楼层信息>中,返回的楼层信息结果中包含了楼层的具体信 ...