Vue手动控制点击事件Click触发方式

 更新时间:2022年01月25日 08:44:05   作者:梅长弓  
这篇文章主要介绍了Vue手动控制点击事件Click触发方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

手动控制点击事件Click触发

方法一

变量的值&&触发函数

在这里插入图片描述

方法二

利用变量控制css样式设置其pointer-event:none

在这里插入图片描述

Vue点击click事件解析

Vue算是前端技术比较火的一门技术了,所以在日常开发当中掌握它还是比较重要的,最近要用vue做一个移动端项目,趁着空闲的时间来简单的写一下demo,希望能够帮到大家:

废话不多说,先上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="./vue.js"></script>-->
    <script src="2.5.20-vue.js"></script>
</head>
<body>
<div id="app">
     //@click点击事件getMethod和getMethod()带不带小括号其实没多大的区别,vue在底层会把传过去的函数统一解析成为方法,带小括号说明有相应的实参传入方法体里面;
    <!--<p   @click="getMethod">aaaa</p>-->       
    <!--<p   @click="getMethodFun">aaaa</p>-->
    <p   @click="getMethod()">aaaa</p>
    <p   @click="getMethodFun()">bbbb</p>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                message: 'father',
                show: true
            };
        },
        methods: {
            getMethod () {      //点击事件的时候去寻找相应的方法,在底层做转换直接写方法名,大括号里面写相应的业务逻辑
                console.log('11');
            },
 //也可以采用匿名函数的写法定义方法名,然后进行调用这种方法也是可以的,只不过getMethod ()的写法更加简洁,但是在实际开发当中这个可是不支持的例如   aaFunc (){}         //直接这样写是会报错的,一定要注意;
            getMethodFun: function () {   
                console.log('22')
            }
        },
    });
</script>
</html>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue2中无法检测到数组变动的原因及解决

    Vue2中无法检测到数组变动的原因及解决

    由于某些限制,vue2不能检测到某些情况下数组的变动,本文就将具体讲解这两种限制的解决思路
    2021-06-06
  • vue.js-div滚动条隐藏但有滚动效果的实现方法

    vue.js-div滚动条隐藏但有滚动效果的实现方法

    下面小编就为大家分享一篇vue.js-div滚动条隐藏但有滚动效果的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue 内置过滤器的使用总结(附加自定义过滤器)

    vue 内置过滤器的使用总结(附加自定义过滤器)

    这篇文章主要介绍了vue 内置过滤器的使用总结(附加自定义过滤器),详细的介绍了各种过滤器的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue实现导航栏效果(选中状态刷新不消失)

    vue实现导航栏效果(选中状态刷新不消失)

    这篇文章主要为大家详细介绍了vue实现导航栏效果,选中状态刷新不消失,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Vue3封装组件完整实例(带回调事件)

    Vue3封装组件完整实例(带回调事件)

    Vue.js已成为现代Web开发中不可或缺的技术之一,虽然Vue.js的一些基础概念和语法比较易学,但深入挖掘Vue.js的核心概念和功能需要更多的实践,下面这篇文章主要给大家介绍了关于Vue3封装组件(带回调事件)的相关资料,需要的朋友可以参考下
    2023-06-06
  • vue定义全局变量和全局方法的方法示例

    vue定义全局变量和全局方法的方法示例

    这篇文章主要介绍了vue定义全局变量和全局方法的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue2老项目中node-sass更换dart-sass的操作方法

    vue2老项目中node-sass更换dart-sass的操作方法

    这篇文章主要介绍了vue2老项目中node-sass更换dart-sass的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-07-07
  • vue使用富文本编辑器vue-quill-editor的操作指南和注意事项

    vue使用富文本编辑器vue-quill-editor的操作指南和注意事项

    vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想,所以果断使用vue-quill-editor来实现,下面这篇文章主要给大家介绍了关于vue使用富文本编辑器vue-quill-editor的操作指南和注意事项,需要的朋友可以参考下
    2023-05-05
  • 在 React、Vue项目中使用SVG的方法

    在 React、Vue项目中使用SVG的方法

    本篇文章主要介绍了在 React、Vue项目中使用SVG的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 在Vue组件上动态添加和删除属性方法

    在Vue组件上动态添加和删除属性方法

    下面小编就为大家分享一篇在Vue组件上动态添加和删除属性方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论