vue的事件绑定与方法详解


Posted in Javascript onAugust 16, 2017

一、在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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
JavaScript事件委托实例分析
May 26 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 #Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 #Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 #Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 #jQuery
详谈表单重复提交的三种情况及解决方法
Aug 16 #Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 #Javascript
Node.js 的模块知识汇总
Aug 16 #Javascript
You might like
火车头采集器3.0采集图文教程
2007/03/17 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
php之可变函数的实例详解
2017/09/13 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
javascript的函数作用域
2014/11/12 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
出生医学证明样本
2014/01/17 职场文书
优秀教师事迹简介
2014/02/02 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
人代会简报
2015/07/21 职场文书
文艺委员竞选稿
2015/11/19 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
Mysql开启外网访问
2022/05/15 MySQL