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 相关文章推荐
基于node.js的快速开发透明代理
Dec 25 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
JS实现放烟花效果
Mar 10 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
PHP的栏目导航程序
2006/10/09 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
smarty简单应用实例
2015/11/03 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
学生违反校规检讨书
2014/10/28 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
Django框架中表单的用法
2022/06/10 Python