Vue-事件处理器-蒲公英云

Vue-事件处理器

v-on指令

计数器演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue-事件处理器</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    </head>
    <body>
        <div id="app">
        <div>计数器:{
   {s}}</div>
        <button v-on:click="s+=1">按钮</button>
        <script type="text/javascript"> new Vue({ el: '#app', data:{ s:0 } }) </script>
    </body>
</html>

请添加图片描述

v-on指令调用方法

调用自定义方法演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue-事件处理器</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    </head>
    <body>
        <div id="app">
        <button v-on:click="s">按钮</button>
        <script type="text/javascript"> new Vue({ el: '#app', data:{ s:function(){ alert("hello"); } } }) </script>
    </body>
</html>

在这里插入图片描述

在事件中读取data里的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue-事件处理器</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    </head>
    <body>
        <div id="app">
        <button v-on:click="s">按钮</button>
        <script type="text/javascript"> new Vue({ el: '#app', data:{ a:"xiaowang" }, methods:{ s:function(event){ alert(this.a); }, } }) </script>
    </body>
</html>