Vue.js 综合
<!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 综合的更多相关文章
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Vue.js——vue-resource全攻略
概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的D ...
- vue.js学习（第一课）
学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- vue.js+boostrap最佳实践
一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
- vue.js慢速入门（2）
4.组件使用基础 什么是组件?组件可以理解为可重用的自定义HTML. 可以使用一堆组件来构造大型应用,任意类型的应用界面都可以抽象为一个组件树: 可以把组件代码按照template.style.scr ...
- vue.js插件使用(01) vue-resource
本文的主要内容如下: 介绍vue-resource的特点 介绍vue-resource的基本使用方法 基于this.$http的增删查改示例 基于this.$resource的增删查改示例 基于int ...
- Vue.js学习 Item1 --快速入门
我们以 Vue 数据绑定的快速导览开始.如果你对高级概述更感兴趣,可查看这篇博文. 尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子.在浏览器新标签页中打开它,跟 ...
- Vue.js快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
随机推荐
- Window配置Redis环境和简单使用
一.关于Redis Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符串.哈希表.列表.集合.有序集合,位图,hyperloglogs等数据 ...
- Uniform and Interpolator Packing的作用
All of the packing that is done is completely transparent to the user of the OpenGL ES Shading Langu ...
- PDO 增删改查封装的类
Selecting Data 你在mysql_*中是这样做的 <?php $result = mysql_query('SELECT * from table') or die(mysql_er ...
- Firebug Console Panel 控制台详解【转载+整理】
本文内容 信息显示 信息显示的占位符 console.group 和 console.groupEnd 分组显示 console.dir console.dirxml console.assert c ...
- ubuntu12.04 lts 安装gcc 4.8
gcc 4.8.1 是第一个完全支持C++11 的编译器,Windows上可以安装mingw版的,在sourceforge 上有下载,安装也比较方便.在Linux上安装的话需要首先安装一些依赖库.在U ...
- VMware用于Site Recovery Manager 5的vSphere Replication功能一览
http://www.searchstorage.com.cn/showcontent_54838.htm 参考:深度解析SRM 5.0和vSphere Replication http://wenk ...
- 升级华为s2016
Part 1 升级Bootrom 概述:启动启动菜单,用xmodem协议升级BootRom 升级的文件如下: wnm2.2.3-0004.zip :web网管zip压缩包文件. S2008_16-VR ...
- Jlink烧写出错 : Unable to halt arm core
环境:TQ2440开发板,J-link 通过J-link向TQ2440开发板的Nor Flash烧写程序,执行烧写时出错:Unable to halt arm core-详情如下图所示: 解决办法: ...
- [转]Maven介绍，包括作用、核心概念、用法、常用命令、扩展及配置
转自:http://www.trinea.cn/android/maven/ 两年半前写的关于Maven的介绍,现在看来都还是不错的,自己转下.写博客的一大好处就是方便自己以后查阅,自己总结的总是最靠 ...
- http-server使用
https://segmentfault.com/q/1010000003926981