[js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一、在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做
1 window.onload = function () { 2 var c = new Vue({ 3 el : 'body', 4 methods : { 5 say : function(){ 6 alert( '欢迎学习vue' ); 7 } 8 } 9 }); 10 } 11 12 <input type="button" value="点我" v-on:click="say();"/>
添加方法,需要在vue实例的对象参数中,添加一项methods配置, methods是字面量方式,如上例,我们添加了一个say方法, 在按钮中绑定了一个点击事件,当事件触发的时候,执行say();
二、绑定双击事件,通过在methods方法中定义的函数,操作data中的数据
1 window.onload = function () { 2 var c = new Vue({ 3 el : 'body', 4 data : { 5 arr : [ 10, 20, 30 ] 6 }, 7 methods : { 8 change : function(){ 9 this.arr.push( 40 ); 10 } 11 } 12 }); 13 } 14 15 <input type="button" value="点我" v-on:dblclick="change();"/> 16 <ul id="box"> 17 <li v-for="value in arr">{{value}}</li> 18 </ul>
上述例子,通过在按钮中绑定双击事件,当事件触发时,调用change方法, 通过this.arr 访问data中定义的数组arr, 向arr中push值40,那么data中的arr数据就被修改了,基于vue是MVVM驱动方式, 那么arr的修改 就会 实时更新到视图中.结果就是在ul下面新增一项li,值为40
三、指令:v-show,值为false/true. 当为false时,该元素隐藏,当为true时,该元素显示.
1 <style> 2 div { 3 width: 200px; 4 height: 200px; 5 background: red; 6 float:left; 7 margin:20px; 8 } 9 </style> 10 <script src="../js/vue.js"></script> 11 <script> 12 window.onload = function () { 13 var c = new Vue({ 14 el : 'body', 15 16 }); 17 } 18 </script>
1 <div v-show="true"></div> 2 <div v-show="true"></div> 3 <div v-show="false"></div>
输出结果:
<div></div>
<div></div>
<div style="display: none;"></div>
四、点击按钮,实现div显示与隐藏
1 <style> 2 div { 3 width: 200px; 4 height: 200px; 5 background: red; 6 } 7 </style> 8 <script src="../js/vue.js"></script> 9 <script> 10 window.onload = function () { 11 var c = new Vue({ 12 el: 'body', 13 data: { 14 flag: false 15 }, 16 methods : { 17 toggle : function(){ 18 this.flag = !this.flag; 19 } 20 } 21 }); 22 } 23 24 <input type="button" value="点我" v-on:click="toggle();"/> 25 <div v-show="flag"></div>
[js高手之路] vue系列教程 - vue的事件绑定与方法(2)相关推荐
- [js高手之路] es6系列教程 - 迭代器与生成器详解
什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...
- [js高手之路]设计模式系列课程-发布者,订阅者重构购物车
发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- 原生js由html创建节点,[js高手之路]HTML标签解释成DOM节点的实现方法
最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支 ...
- [js高手之路] html5 canvas教程 - 绘制七巧板
七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. 1 <head> 2 <met ...
- [js高手之路] 设计模式系列课程 - DOM迭代器(2)
如果你对jquery比较熟悉的话,应该用过 eq, first, last, get, prev, next, siblings等过滤器和方法.本文,我们就用迭代设计模式来封装实现,类似的功能 1 & ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- HTML弧度文本,[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...
canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 str ...
最新文章
- mac 下周期调度命令或脚本
- linux 系统目录 java_Linux系统目录及说明
- Python zipfile 压缩文件夹
- 一个商场营销经理的实习总结
- 下一次装mysql 试一下这个方法
- NUC1776 Tiling Up Blocks【二维最长上升子序列+DP】
- Linux安装Django
- 光缆故障定位检测仪使用方法简介
- linux服务器密码策略设置:登录密码错误次数限制
- Win10使用PowerShell命令行查看cpu温度
- 性能常识 [踩坑总结] nf_conntrack: table full, dropping packet [新]
- 攒机笔记二十:改造笔记本电脑(华硕A555L)
- python实战(一)Python爬取猫眼评分排行前100电影及简单数据分析可视化
- RMAN duplicate 方式 做个备库
- w锋ndows用户组设置,第2章Wndows+Server+2008本地用户和组.ppt
- MySQL结课体会,听课心得体会小结
- HBuilderX用uni-app做微信小程序授权登录
- tl494cn逆变器电路图_TL494逆变器应用电路图
- 初始化 Microsoft Visual SourceSafe 源代码管理提供程序时失败问题处理
- Java开源的ERP系统源码带文字搭建教程,前后端分离架构
热门文章
- 第一个helloworld.c实例
- kux转换为mp4软件_kux2mp4(优酷kux转换为mp4软件)下载-kux2mp4(优酷kux转换为mp4软件)免费版下载v2021...
- linux 服务器 重新启动 慢,Linux系统启动缓慢解决方法[阮胜昌]
- mysql 临时表增加主键_MySQL之重建表
- linux内存free低cache高,Linux之free命令buff/cache过高
- django分页模块
- 京东数科上市首轮问询「答卷」:与蚂蚁集团有本质区别、信用风险损失有限
- 如何在命令提示符下编译运行含有Package的java文件
- nginx开启core dump文件
- #include *.c文件的妙用