<!DOCTYPE HTML>

<html>

    <head>

        <title>vue.js 处理用户输入</title>

        <script src="../vue.js"></script>

    </head>

<body>

    <div id="app">

        <input v-model="newTodo" v-on:keyup.enter="addTodo" />

        <ul>

            <li v-for="todo in todos">

                <span>{{todo.text}}</span>

                <button v-on:click="removeTodo($index)">X</button>

            </li>

        </ul>

    </div>

        <script>

            new Vue({

                el:"#app",

                data:{

                    newTodo:"",

                    todos:[

                        {text:'add  some todos'}

                    ]

                },

                methods:{

                    addTodo:function(){

                        var text = this.newTodo.trim();

                        if(text){

                            this.todos.push({text:text});

                            this.newTodo = '';

                        }

                    },

                    removeTodo:function(index){

                        this.todos.splice(index, 1);

                    }

                }

            });

        </script>

</body>

</html>

效果：

aaarticlea/png;base64,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" alt="" />

Vue.js 综合的更多相关文章

  1. Vue.js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  2. Vue.js——vue-resource全攻略

    概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的D ...

  3. vue.js学习（第一课）

    学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...

  4. Vue.js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  5. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

  6. vue.js慢速入门（2）

    4.组件使用基础 什么是组件?组件可以理解为可重用的自定义HTML. 可以使用一堆组件来构造大型应用,任意类型的应用界面都可以抽象为一个组件树: 可以把组件代码按照template.style.scr ...

  7. vue.js插件使用(01) vue-resource

    本文的主要内容如下: 介绍vue-resource的特点 介绍vue-resource的基本使用方法 基于this.$http的增删查改示例 基于this.$resource的增删查改示例 基于int ...

  8. Vue.js学习 Item1 --快速入门

    我们以 Vue 数据绑定的快速导览开始.如果你对高级概述更感兴趣,可查看这篇博文. 尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子.在浏览器新标签页中打开它,跟 ...

  9. Vue.js快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

随机推荐

  1. List 多次排序

    List<Patientmain> list = patientmains.OrderBy(p => p.Firstname).ThenBy(p => p.Middlename ...

  2. java多线程分块上传并支持断点续传最新修正完整版本[转]

    package com.test; import java.io.DataInputStream; import java.io.DataOutputStream; import java.io.Fi ...

  3. 解决webstorm本地IP访问页面出错的问题,webstorm支持IP访问

    想在手机端访问webstorm做出的页面,遇到了根据IP地址访问页面错误的问题,试了网上的方法:“设置webstorm可以被外部连接访问”,依旧不能解决 解决方法: 在webstorm下:ctrl+a ...

  4. Android Studio 的 10 个你非常有可能不知道的技巧

    本文首发:http://prototypez.github.io/2016/04/19/about-10-things-you-probably-didn-t-know-you-could-do-in ...

  5. yii源码三 -- db

    <AR> CActiveRecord:path:/framework/db/ar/CActiveRecord.phpoverview:is the base class for class ...

  6. Solidworks如何替换工程图参考零件

    不要在左侧树形图右击修改   而是要在右侧主视图上右击,替换模型   左侧浏览找到新的零件,然后打开   替换完成之后,会有一些尺寸变成黄色,只需要改动黄色部分即可,不需要每个尺寸重新标注    

  7. Office 超级录屏如何旋转视频90度之后保存

    打开视频转换专家   添加视频后点击编辑,然后在旋转的地方设置旋转,应用   输出可以正常播放  

  8. Windows下安装Oracle Database 12c Release 1(12.1.0.2.0) - Enterprise Edition

    Windows下安装Oracle Database 12c Release 1(12.1.0.2.0) 最近因需要在Oracle 数据库上建立ODI的资料档案库,需要安装Oracle Database ...

  9. 解决java网络编程IPv6问题

    如果系统中开启了IPV6协议(比如window7),java网络编程经常会获取到IPv6的地址,这明显不是我们想要的结果,搜索发现很多蹩脚的做法是:禁止IPv6协议.其实查看官方文档有详细的说明: j ...

  10. 关于java线程的daemon的认识

    在 JAVA中的CountDownLatch.CyclicBarrier.Semaphore的简单测试 这文章里说到了线程的daemon问题,特写一篇来分析一下. 上代码: package com.y ...