[js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一、在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做
window.onload = function () {
var c = new Vue({
el : 'body',
methods : {
say : function(){
alert( '欢迎学习vue' );
}
}
});
} <input type="button" value="点我" v-on:click="say();"/>
添加方法,需要在vue实例的对象参数中,添加一项methods配置, methods是字面量方式,如上例,我们添加了一个say方法, 在按钮中绑定了一个点击事件,当事件触发的时候,执行say();
二、绑定双击事件,通过在methods方法中定义的函数,操作data中的数据
window.onload = function () {
var c = new Vue({
el : 'body',
data : {
arr : [ 10, 20, 30 ]
},
methods : {
change : function(){
this.arr.push( 40 );
}
}
});
} <input type="button" value="点我" v-on:dblclick="change();"/>
<ul id="box">
<li v-for="value in arr">{{value}}</li>
</ul>
上述例子,通过在按钮中绑定双击事件,当事件触发时,调用change方法, 通过this.arr 访问data中定义的数组arr, 向arr中push值40,那么data中的arr数据就被修改了,基于vue是MVVM驱动方式, 那么arr的修改 就会 实时更新到视图中.结果就是在ul下面新增一项li,值为40
三、指令:v-show,值为false/true. 当为false时,该元素隐藏,当为true时,该元素显示.
<style>
div {
width: 200px;
height: 200px;
background: red;
float:left;
margin:20px;
}
</style>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
var c = new Vue({
el : 'body', });
}
</script>
<div v-show="true"></div>
<div v-show="true"></div>
<div v-show="false"></div>
输出结果:
<div></div>
<div></div>
<div style="display: none;"></div>
四、点击按钮,实现div显示与隐藏
<style>
div {
width: 200px;
height: 200px;
background: red;
}
</style>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
var c = new Vue({
el: 'body',
data: {
flag: false
},
methods : {
toggle : function(){
this.flag = !this.flag;
}
}
});
} <input type="button" value="点我" v-on:click="toggle();"/>
<div v-show="flag"></div>
[js高手之路] vue系列教程 - vue的事件绑定与方法(2)的更多相关文章
- [js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...
- [js高手之路] es6系列教程 - 迭代器与生成器详解
什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...
- [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)
关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下pro ...
- [js高手之路] es6系列教程 - 函数的默认参数详解
在ES6之前,我们一般用短路表达式处理默认参数 function show( a, b ){ var a = a || 10; var b = b || 20; console.log( a, b ) ...
- [js高手之路] es6系列教程 - 箭头函数详解
箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...
- [js高手之路] es6系列教程 - var, let, const详解
function show( flag ){ console.log( a ); if( flag ){ var a = 'ghostwu'; return a; } else { console.l ...
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...
- [js高手之路]es6系列教程 - 解构详解
解构通俗点说,就是通过一种特定格式,快捷的读取对象/数组中的数据的方法, es6之前,我们通过对象名称[键] 读取数据 var User = { 'name' : 'ghostwu', 'age' : ...
- [js高手之路] es6系列教程 - Set详解与抽奖程序应用实战
我们还是从一些现有的需求和问题出发,为什么会有set,他的存在是为了解决什么问题? 我们看一个这样的例子,为一个对象添加键值对 var obj = Object.create( null ); obj ...
随机推荐
- 使用REST风格架构您需要知道的一些事
1. REST的由来 2. REST的构成 2.1. 资源 2.2. 资源的表述 2.2.1. MIME(Multipurpose Internet Mail Extensions) 2.2.2. 缓 ...
- iScroll的简单使用
今天是2017-1-18,每天进步一点点 今天主要来总结一下我在项目中遇到的关于iScroll的使用问题. 第一个是iscroll的初始化问题. --在页面资源(包括图片)加载完毕后100ms之后初始 ...
- 我这样减少了26.5M Java内存!
WeTest 导读 历时五天的内存优化已经结束,这里总结一下这几天都做了什么,有哪些收获.优化了,或可以优化的地方都有哪些.(因为很多事还没做,有些结论需要一定样本量才能断定,所以叫一期)一期优化减少 ...
- spring boot系列03--spring security (基于数据库)登录和权限控制(上)
这篇打算写一下登陆权限验证相关 说起来也都是泪,之前涉及权限的比较少所以这次准备起来就比较困难. 踩了好几个大坑,还好最终都一一消化掉(这是废话你没解决你写个什么劲
- SQL-Oracle游标
游标提供了一种从集合性质的结果集中提供出单条记录的手段.初始时指向首记录. 游标的种类 静态游标.REF游标 静态游标:能够理解为一个数据快照,打开游标后的结果集是数据库表中数据的备份,数据不会对表的 ...
- Android查缺补漏--Activity生命周期和启动模式
一.生命周期 onCreate():启动Activity时,首次创建Activity时回调. onRestart():再次启动Activity时回调. onStart():首次启动Activity时在 ...
- axios遇到的坑
axios 可以使用一个config.js 配置文件来管理它的请求信息.具体配置不细说,使用如下. 一,使用配置方式 GET方法: let promise = axios.get(url, con ...
- [转]压缩感知重构算法之分段正交匹配追踪(StOMP)
分段正交匹配追踪(StagewiseOMP)或者翻译为逐步正交匹配追踪,它是OMP另一种改进算法,每次迭代可以选择多个原子.此算法的输入参数中没有信号稀疏度K,因此相比于ROMP及CoSaMP有独到的 ...
- make工程管理器
1.概述 大型程序中,人们希望工具自动识别修改的文件,而且不需要输入冗长的命令,就可以进行编译链接等操作,于是make工程管理器应运而生. make可以自动识别文件时间戳,只处理修改的文件: make ...
- VUE-CLI Vue安装及开发,npm run build无法查看项目的问题
Vue-cli 本地安装vue项目 需要安装node.js,用node命令行npm的方式安装Vue 步骤: 1.进入项目地址安装 npm install vue-cli -g 2.初始化一下 ESli ...