<!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. 深入浅出TCP与UDP协议

    深入浅出TCP与UDP协议 网络协议是每个前端工程师的必修课,TCP/IP协议族是一系列网络协议的总和,而其中两个具有代表性的传输层协议,分别是TCP与UDP,本文将介绍这两者以及他们之间的区别. 一 ...

  2. 原来update还可以这么用，一切都是这么神奇。

    update sys_user_info a left join union_menber_info b on a.user_cardno = b.member_cardno set a.user_s ...

  3. java 路径问题

    java路径存在两种写法"/"和"\\" String path="D:\\1.txt"; String path1="D:/1. ...

  4. TomatoLog-1.1.0实现ILoggerFactory

    TomatoLog TomatoLog 是一个基于 .NETCore 平台的产品. The TomatoLog 是一个中间件,包含客户端.服务端,非常容易使用和部署. 客户端实现了ILoggerFac ...

  5. Servlet，过滤器和监听器的配置和使用

    一.什么是Servlet Servlet使用Java语言实现的程序,运行于支持Java语言的Web服务器或者应用服务器中.Servlet先于JSP出现,提供和客户端动态交互的功能.Servlet可以处 ...

  6. https免费证书申请certbot，nginx

    官网:https://certbot.eff.org/ 下载: wget https://dl.eff.org/certbot-auto chmod a+x certbot-auto ./certbo ...

  7. 天梯杯 L2-010. 排座位

    L2-010. 排座位 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 布置宴席最微妙的事情,就是给前来参宴的各位宾客安排座位. ...

  8. CodeForces 917A The Monster 贪心+思维

    As Will is stuck in the Upside Down, he can still communicate with his mom, Joyce, through the Chris ...

  9. JavaScript简单的弹幕

    弹幕 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道. 每一个通道是从左到右的一条,高度固定,这样不同通道的弹幕不会相互覆盖. 弹幕滑动就是简单设置CSS属性  t ...

  10. Ubuntu18.04双系统下安装CUDA10+cuDNN7.5

    前言 本篇写于2019-4-25 这两天装Ubuntu18.04双系统简直装到崩溃.一是非常著名的开机卡死在Logo界面的问题,另一个是在装Nvidia驱动和CUDA的时候,更是费心.而网上的资料又良 ...