vue中简单的小插曲
2024-08-24 02:55:05
我们现在来学习一下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:[,,,,,,]
}
})
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,)
}
}
})
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.="enter()"
@keyup.up="up()"
@keyup.down="down()"
@keyup.left="left()"
@keyup.right="right()"
>
</div>
这样键盘事件就是这么简单的！
最新文章
- PHP实现微信公众平台开发 全套视频资源下载
- Android中Activity的启动模式
- JeeSite环境搭建及运行和打包（master20161117）
- Qt5 程序启动画面图片效果
- 【转】LINUX 5 常用ftp telnet配置
- acdream.Bet(数学推导）
- iOS 判断有无网络连接
- WebService到底是什么？ [转]
- Linux scp命令
- 深入浅出Ajax（二）
- 网络端口地址转换的NAPT配置
- 潭州课堂25班：Ph201805201 tornado 项目 第八课 增加喜欢功能（课堂笔记）
- windows android ndk的某些编译工具报错乱码0x5 或拒绝访问05
- WebService调用SSAS教程
- Vue下载页面显示内容
- PyQt5--ToolBar
- 【AtCoder】AtCoder Petrozavodsk Contest 001
- Failed to resolve: 之一
- VS远程调试亲历
- [LeetCode&Python] Problem 682. Baseball Game