Vue之v-on绑定监听事件

小咪咪 2023-10-18 08:50 18阅读 0赞

vue一个重要的指令就是 v-on，它用来绑定监听器

在button按钮上， 使用v-on:click给该元素绑死了一个点击事件

在普通元素上，v-on可以监听原生的DOM事件，比如：click、dbclick、keyup、mousemove等。

![Image 1][]

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Vue v-on 绑定事件监听器</title>
     </head>
     <body>
      <div id="app">
      <p v-if="show">这是隐藏的文本</p>
      <button v-on:click="handleClose">点击隐藏</button>
     </div>
    
    <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script>
     var app = new Vue({
      el:'#app',
      data:{
       show : true
      },
      methods: {
       handleClose:function (){
        this.close();   
       },
       close:function(){
        this.show = false;
       }
      }
     })
    </script>
     </body>
    </html>

![70][]

表达式除了方法名之外，也可以是一个内联语句：

<div id="app">
      <p v-if="show">这是隐藏的文本</p>
      <button v-on:click="show = false">点击隐藏</button>
     </div>

[Image 1]: 
[70]: https://img-blog.csdn.net/20180914160935370?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue之v-on绑定监听事件

vue一个重要的指令就是 v-on，它用来绑定监听器在button按钮上，使用v-on:click给该元素绑死了一个点击事件在普通元素上，v-on可以监听原生的DOM

小咪咪/ 2023年10月18日 08:50/ 0 赞/ 19 阅读

相关 vue事件绑定

@dblclick.native 绑定原生事件，可改成@dblclick.native="handle" 然后在methods中写handle方法 <templat

朴灿烈づ我的快乐病毒、/ 2023年07月13日 15:15/ 0 赞/ 50 阅读

相关 vue鼠标事件绑定

1.绑定vue的根节点，所有vue操作的对象都在这个根节点中 ![在这里插入图片描述][20191009220005473.png] 2.初始化vue,el为绑定的根

心已赠人/ 2023年06月06日 03:51/ 0 赞/ 57 阅读

相关 Vue 事件绑定

v-on指令用法： <button type="button" v-on:click ="num++">点击</button> v-on 可用@代替 @click

谁借莪１个温暖的怀抱￠/ 2023年03月12日 09:07/ 0 赞/ 65 阅读

相关 JavaScript 事件类型，事件绑定，事件监听

事件类型事件绑定事件监听事件类型鼠标事件： onclick：鼠标单击对象时触发 ondblclick：鼠标双击对象时触发

悠悠/ 2023年01月21日 06:18/ 0 赞/ 12 阅读

相关 vue(2)事件绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

我会带着你远行/ 2022年10月02日 11:44/ 0 赞/ 277 阅读

相关 vue 事件绑定

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />

末蓝、/ 2022年05月31日 09:57/ 0 赞/ 354 阅读

相关 Vue之绑定事件

绑定事件 v-on:click 简写：@click；为button添加一个change的点击事件，改变content的值 <div> <div cla

喜欢ヅ旅行/ 2022年04月22日 10:24/ 0 赞/ 372 阅读

相关 vue之v-on事件绑定

vue之v-on事件绑定demo: <!DOCTYPE html> <html lang="en"> <head> <meta cha

淡淡的烟草味﹌/ 2022年04月06日 17:31/ 0 赞/ 565 阅读

相关 Thinkphp6 事件绑定事件监听事件订阅

event.php <?php // 事件定义文件 return \[ 'bind' => \[ \], 'lis

旧城等待，/ 2021年09月08日 19:30/ 0 赞/ 1165 阅读