<!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. echarts文档对照

    echarts的各种配置项可以对照这个文档: https://echarts.baidu.com/echarts2/doc/option.html#title~tooltip.axisPointer. ...

  2. Pandas DataFrame笔记

    1.属性方式,可以用于列,不能用于行 2.可以用整数切片选择行,但不能用单个整数索引(当索引不是整数时) 3.直接索引可以使用列.列集合,但不能用索引名索引行 用iloc取行,得到的series: d ...

  3. MFC获得当前用户等信息

    MFC获得当前用户等信息 #ifndef UNICODE #define UNICODE #endif #pragma comment(lib, "netapi32.lib") # ...

  4. SSH框架的基本整合

    SSH框架的基本整合 AOP注解方式 编写切面类(包括通知和切入点) 开启自己主动代理 JDBC模板技术 Spring提供模板技术,数据库的操作 以后编写DAO层,都能够继承JdbcDaoSuppor ...

  5. Java开发 - 异常 - 抛出异常

    问题: 如何抛出一个系统异常并且捕获它 代码如下: public class ThrowDemo { static void demoproc() { try { throw new NullPoin ...

  6. ZH奶酪：利用CSS将checkbox选项放大

    在Hybrid App开发过程中,html中默认的checkbox选项在手机屏幕上显得比较小,app不能像web page那样放大缩小,所以要通过CSS将checkbox选项放大: 例如HTML代码: ...

  7. Asp.Net 之 禁用TextBox的记忆功能

    IE提供了一个自动完成功能可以记忆我们的输入内容(如登录帐号等),方便下一次快速地录入类似资料.这确实是一个非常友好的功能,在操作时只需用鼠标双击文本框或输入前几个字符,系统会自动列出以前的录入历史供 ...

  8. 电脑的fn锁，f1-f12与功能键 互换

    提要: 有些机子特别逆天,比如说Thinkpad e系列.好好的f1-f12一定要加上fn才能按出来,默认的是画在上面的功能键,作为娱乐来说其实是还不错的,但是像我等程序员就觉得特别逆天了.你有两个选 ...

  9. Spring学习笔记六：Spring整合Hibernate

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6785323.html  前言:整合概述 Spring整合Hibernate主要是把Hibernate中常用的S ...

  10. 使用OpenNI 2获取RGBD摄像头深度信息

    NiViewer 安装好摄像头驱动和OpenNI后,在Tools文件夹中可以找到一个程序NiViewer.NiViewer的一些基本控制方法如下: 1. ESC关闭NiViewer程序 2. 右键可以 ...