<!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. pak文件的打包和解包

    pak格式的文件 一般游戏有资源 游戏素材会打包放进去 比如游戏语音 游戏多加点语音  多加一些贴图资源 外部文件实现的 素材--->pak文件--->用的时候从文件中取出来 文件的打包 ...

  2. .net core 实现 api网关 进行 api版本控制

    场景: 由一次大的项目改动引起的app端api不兼容问题,这时候就需要对api做版本控制了,权衡之后因为用户不多,选择了强更,没人想在已经写了8000行代码的单个svc文件中维护好几个版本的接口或者继 ...

  3. MinorGC 和 FullGC的理解

    1.GC回收机制熟悉么,分代算法知道么?2.了解 Java 虚拟机的垃圾回收算法? 从年轻代空间(包括 Eden 和 Survivor 区域)回收内存被称为 Minor GC. Major GC 是清 ...

  4. 【目标检测】RCNN算法详解

    网址: 1. https://blog.csdn.net/zijin0802034/article/details/77685438 (box regression 边框回归) 2. https:// ...

  5. 点击任意位置关闭（CocosCreator）

    推荐阅读:  我的CSDN  我的博客园  QQ群:704621321  我的个人博客       今天,接触到一个新功能,当弹出某个弹框时,需要点击除弹框的剩余任意位置,来关闭该弹框,例如:当红框内 ...

  6. Leetcode之二分法专题-153. 寻找旋转排序数组中的最小值（Find Minimum in Rotated Sorted Array）

    Leetcode之二分法专题-153. 寻找旋转排序数组中的最小值(Find Minimum in Rotated Sorted Array) 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ...

  7. Git 忽略某些文件提交

    在项目中有些配置文件不需要提交,但是有同学在后面开发中发现在.igonore文件中无论如何都无法忽略某些文件的提交.原因在这里: 已经维护起来的文件,即使加上了gitignore,也无济于事.---- ...

  8. 2019DX#6

    Solved Pro.ID Title Ratio(Accepted / Submitted)   1001 Salty Fish 16.28%(7/43)  OK 1002 Nonsense Tim ...

  9. CodeForces 677D. Vanya and Treasure 枚举行列

    677D. Vanya and Treasure 题意: 给定一张n*m的图,图上每个点标有1~p的值,你初始在(1,1)点,你必须按照V:1,2,3...p的顺序走图上的点,问你如何走时间最少. 思 ...

  10. SSH项目，JSP项目，SSM项目源码附带环境安装指导视频教程

    基于java开发的一个局域网端口扫描程序下载地址:https://www.icodedock.com/article/6.html 用JAVA实现对JAVA代码的格式化下载地址:https://www ...