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:[,,,,,,]
}
})
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>
这样键盘事件就是这么简单的!
vue中简单的小插曲的更多相关文章
- 基于vue-cli、elementUI的Vue超简单入门小例子
- 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...
- vue中简单的数据请求 fetch axios
fetch 不需要额外的安装什么东西,直接就可以使用 fetch(url, { method:'post', headers: { 'Content-Type': 'application/x-www ...
- 移动端固定头部和固定左边第一列的实现方案(Vue中实现demo)
最近移动端做一份报表,需要左右滚动时,固定左边部分:上下滚动时,固定头部部分. 代码在Vue中简单实现 主要思路是: a.左边部分滚动,实时修改右边部分的滚动条高度 b.头部和内容部分都设置固定高度, ...
- vue中引入mintui、vux重构简单的APP项目
最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- Vue实例学习过程中碰到的小问题
在使用插值表达式{{ }}取data中list数组中的值时把整个表达式当做文本显示了,原因不明,但是使用v-text替换插值表达式之后问题得到解决. 原因已经查明,因为第78行,定义对象car时后面 ...
- 【转】简单理解Vue中的nextTick
前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...
- 简单理解Vue中的nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...
- vue中axios的简单使用
我们一般在用jq的时候会使用到ajax来进行与服务器之间的交流,vue中也提供了相应的类似于ajax的方法-axios来进行与服务器之间的数据传递 现在的这篇是最简单的使用,后续会添加上来复杂的使用 ...
随机推荐
- ACM搜索问题盘点
深度搜索:棋盘问题,详见http://poj.org/problem?id=1321 //#include<bits/stdc++.h> #include<cstdio> #i ...
- Mac下使用终端连接远程使用ssh协议的git服务器
最近换了台新电脑, MacBook pro,拿到新电脑之后小小心喜了一下(终于解脱windows的束缚拥抱mac啦), 然后就开始苦逼的安装各种开发环境了. 之前在windows上使用tortoise ...
- jsp的两种跳转方式和区别
1.forward跳转: 服务器端跳转,地址栏不改变: 执行到跳转语句后马上无条件跳转,之后的代码不再执行(跳转之前一定要释放全部资源): request设置的属性在跳转后的页面仍可以使用: 使用&l ...
- mysql5.6 绿色免安装版 安装详解
一.安装版本简介 MySQL是一个小巧玲珑但功能强大的数据库,目前十分流行.但是官网给出的安装包有两种格式,一个是msi格式,一个是zip格式的.很多人下了zip格式的解压发现没有setup.exe, ...
- V-bind详细使用
v-bind 主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url">& ...
- 【XML】 XML格式一些记录
XML XML格式常用于网络通讯,本身不会有作为而是作为纯文本传输,可以说它是一种独立于应用和硬件的数据传输工具.虽然看起来XML比HTML要更加简单,也知道的更加晚一点,但是需要知道的是,XML才是 ...
- 手把手 git建立仓库,远程推拉及常用git命令和部分Linux命令集锦
方法一:直接在GitHub上建立一个项目,然后git clone (git address name): 此时已经建立好了一个git仓库: cd 文件夹 > 添加文件进去 >git add ...
- MSIL实用指南-装箱拆箱
本篇讲述怎样装箱拆箱.装箱和拆箱都是针对值类型而言的,装箱的性能开销远比拆箱的性能开销大. 装箱装箱指令是Box.使用格式是 ILGenerator.Emit(OpCodes.Box,<值类型& ...
- BigDecimal 转成 double
NUMBER(20,2) 数据库里的字段number ,实体是BigDecimal 将BigDecimal转成double public double getOrderamount() { if ( ...
- web 表单提交按钮的测试点
web表单中的提交按钮的测试点: 在提交前需要理解清楚的点: 1.表单中哪些字段是必填项 2.表单中字段内容的限制:非空.重复.长度.特殊字符,空格.以及一些和业务相关的约束条件 测试点: 1.是否支 ...