标签：javascrip 小例子 键盘事件 input text new pre func js代码
我们现在来学习一下vue中一些简单的小东西：
首先我们必须要引入vue.js文件哦！
1.有关文本框里的checkbox
js代码：
new Vue({ el:"#app", data:{ mag:" " } })
html代码：
<div id="app"> <input type="checkbox" v-model="mag"> <h1>{{mag}}</h1> </div>
这样checked的属性值就可以显示到页面上了，我们可以利用它写显示隐藏的小案例。
2.vue中的循环遍历：
js代码：
var app = new Vue({ el: ‘#app‘, data: { arr:[1,2,3,4,5,6,4] } })
html代码：
<div id="app"> <ul> <li v-for="item in arr"> {{ item }} {{$index}} </li> </ul> </div>
这样我们就可以来循环遍历数组中的值了，json 同理，这个方法中同样中包含着$Index,但与angular不同的是没有$odd,$event,$first,$last等。
3.我们下面来做一个简单留言板的小例子
js代码：
var app = new Vue({ el: ‘#app‘, data: { arr:[] }, methods:{ add:function () { this.arr.push(this.a); this.a="" }, remove:function (index) { this.arr.splice(index,1) } } })
html代码：
<div id="app"> <input type="text" v-model="a"> <input type="button" @click="add()" value="按钮" > <div v-show="this.arr.length==0">暂无留言</div> <ul> <li v-for="item in arr"> {{ item }} <a href="javascript:;" @click="remove($index)">删除</a> </li> </ul> </div>
这样一个简单的留言板小案例就完成了。
4.下面我们来看一下非常方便的键盘事件
js代码：
new Vue({ el: ‘#div‘, data: { msg: ‘‘ }, methods: { enter: function () { alert(‘enter‘); }, up: function () { alert(‘up‘); }, down: function () { alert(‘down‘); }, left: function () { alert(‘left‘); }, right: function () { alert(‘right‘); } } });
html代码：
<div id="div"> <input type="text" @keyup.13="enter()" @keyup.up="up()" @keyup.down="down()" @keyup.left="left()" @keyup.right="right()" > </div>
这样键盘事件就是这么简单的！
标签：javascrip 小例子 键盘事件 input text new pre func js代码
原文地址：http://www.cnblogs.com/DongZixin/p/7152802.html
