<!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. 如何获取当前应用程序所用的OpenGL ES的版本

      如何获取当前应用程序所用的OpenGL ES的版本? [答案]     char* glVersion = (char*)glGetString(GL_VERSION);     LOGW(&qu ...

  2. GLFW_KEY_KP_ADD和GLFW_KEY_KP_SUBTRACT

      这两个键的代码分别为: GLFW_KEY_KP_ADD(334) GLFW_KEY_KP_SUBTRACT(333)   对应的是键盘右侧数字面板上的+ -键.

  3. go-ethereum

    如果要深入了解go-ethereum项目的实现与机制,看源代码是必不可少的.今天这篇博客就简单介绍一下如何在本地搭建项目的开发环境. GO语言环境搭建 以win8为例,访问地址https://gola ...

  4. 【Nodejs】外研社一年级起各年级英语音频下载(缺456年级上)

    在 https://news.21cnjy.com/A/130/235/V729768.shtml 有各年级英语音频下载,用爬虫把能下的都下了,除了四五六年级上册的. 爬虫 http://www.cn ...

  5. android studio中为项目添加依赖包的方法

    右键项目,Open Module Settings 打开后选择Dependencies选项卡,点最右边的加号: 选择Libriay dependencies,从下拉列表里面选择就可以了.

  6. 手机站CSS

    手机web——自适应网页设计(html/css控制) 内核: -ms- /* IE 9 */ -moz- /* Firefox */ -webkit- /* Safari and Chrome */ ...

  7. 高级javaScript程序形成过程（进阶）

    实现过程 1.创建对象 if (window.ke){return;} 2.创建私有变量 var _TIME = new Date().getTime(); 3.创建私有函数 _fn(){} 4.创建 ...

  8. spring mvc mongoDb

    http://www.cnblogs.com/dennisit/p/3372568.html 系统环境: 操作系统:  windows xp 数 据 库:  mongodb2.0.6 驱 动 包: S ...

  9. kibana 显示 @timestamp 时间问题（utc or browser当前时间）自动转换显示

    https://github.com/elasticsearch/kibana/issues/95

  10. Nutch的安装和配置

    Nutch是一个Java实现的网络爬虫.Nutch的安装可以使用二进制包,也可以使用源代码安装.这里介绍用二进制包安装. 1. 下载apache-nutch-1.12-bin.tar.gz,并且解压, ...