vue的事件绑定与方法详解

 更新时间:2017年08月16日 09:33:46   作者:ghostwu  
这篇文章主要为大家详细介绍了vue的事件绑定与方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

相关文章

  • element中el-cascader级联选择器只有最后一级可以多选

    element中el-cascader级联选择器只有最后一级可以多选

    本文主要介绍了element中el-cascader级联选择器只有最后一级可以多选,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • Vue3.x最小原型系统讲解

    Vue3.x最小原型系统讲解

    这篇文章主要介绍了Vue3.x最小原型系统讲解。既然用Vue3.0构建最小原型系统,那么肯定要用尤大的最新构建工具Vite来进行项目的初始化,下文举例说明,需要的朋友可以参考一下
    2022-02-02
  • Vue实现按钮旋转和移动位置的实例代码

    Vue实现按钮旋转和移动位置的实例代码

    这篇文章主要介绍了Vue实现按钮旋转和移动位置的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • vue2.0 路由模式mode=

    vue2.0 路由模式mode="history"的作用

    这篇文章主要介绍了vue2.0 路由模式mode="history"的作用,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • vue3保存属性自动换行问题及解决

    vue3保存属性自动换行问题及解决

    这篇文章主要介绍了vue3保存属性自动换行问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 探讨Vue.js的组件和模板

    探讨Vue.js的组件和模板

    指令是Vue.js中一个重要的特性, 主要提供了一种机制将数据的变化映射为DOM行为。下面通过本文给大家分享Vue.js的组件和模板,需要的朋友参考下吧
    2017-10-10
  • Vue+TailWindcss实现一个简单的闯关小游戏

    Vue+TailWindcss实现一个简单的闯关小游戏

    本文将利用Vue+TailWindcss实现一个简单的闯关小游戏,玩家须躲避敌人与陷阱到达终点且拥有多个关卡,感兴趣的小伙伴可以了解一下
    2022-04-04
  • 前端在el-dialog中嵌套多个el-dialog代码实现

    前端在el-dialog中嵌套多个el-dialog代码实现

    最近使用vue+elementUI做项目,使用过程中很多地方会用到dialog这个组件,有好几个地方用到了dialog的嵌套,下面这篇文章主要给大家介绍了关于前端在el-dialog中嵌套多个el-dialog代码实现的相关资料,需要的朋友可以参考下
    2024-01-01
  • vue+jsplumb实现连线绘图

    vue+jsplumb实现连线绘图

    这篇文章主要为大家详细介绍了vue+jsplumb实现连线绘图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue.js第四天学习笔记

    Vue.js第四天学习笔记

    这篇文章主要为大家详细介绍了Vue.js第四天的学习笔记,json数组数据以csv格式导出,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论