首页 > 代码库 > vue中简单的小插曲
vue中简单的小插曲
我们现在来学习一下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=http://www.mamicode.com/"按钮" > <div v-show="this.arr.length==0">暂无留言</div> <ul> <li v-for="item in arr"> {{ item }} <a href=http://www.mamicode.com/"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>
这样键盘事件就是这么简单的!
vue中简单的小插曲
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。