Vue.js中v-on指令的用法介紹

2022-03-14 10:00:17

v-on指令

v-on指令在Vue.js中用來繫結事件監聽器。事件型別由引數指定。表示式可以是一個方法的名字或一個內聯預計，如果沒有修飾符也可以省略。

用在普通元素上時，只能監聽原生DOM事件。用在自定義元素元件上時，也可以監聽子元件觸發的自定義事件。

用法：

v-on:事件型別="函數體"

例如：點選按鈕的時候執行play事件

<button v-on:click="play">點選事件</button>

注意：

在使用v-on指令繫結事件的時候，如果要執行的是無參的函數，函數體可以加括號也可以不加括號，下面的兩種寫法是等價的：

<button v-on:click="play()">點選事件</button>

等同於

<button v-on:click="play">點選事件</button>

但是，如果要傳遞引數，則必須加括號，例如：

<button v-on:click="play(item)">點選事件</button>

上面的例子是給play函數傳遞item引數。

注意：v-on的縮寫@

上面的程式碼等同於下面的程式碼：

<button @click="play">點選事件</button>

程式碼範例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 構建vue範例
           new Vue({
               el:"#my",
               data:{
                   age:30 
               },
               // 方法
               methods:{
                   //無參
                   play:function(){
                        this.age=40;
                   },
                   // 有參
                   playWithPara:function(para){
                         this.age=para;
                   }
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <h1>年齡:{{age}}</h1>
         <button @click="age = 20">設定年齡為20</button>
         <button @click="play">設定年齡為40</button>
         <button @click="playWithPara(50)">根據引數設定年齡</button>
    </div>
</body>
</html>

一個按鈕也可以同時繫結多個事件，例如：

<button v-on="{mouseover:onOver,mouseout:onOut}">繫結多個事件</button>

上面我們通過物件的方式繫結多個事件，物件中的鍵是事件的名稱，值是methods中的成員屬性方法

對應的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 構建vue範例
           new Vue({
               el:"#my",
               data:{
                   age:30 
               },
               // 方法
               methods:{
                   //無參
                   play:function(){
                        this.age=40;
                   },
                   // 有參
                   playWithPara:function(para){
                         this.age=para;
                   },
                   onOver:function(){
                      var current=document.getElementById("mouse");
                      current.innerText="滑鼠移入";
                   },
                   onOut:function(){
                      var current=document.getElementById("mouse");
                      current.innerText="滑鼠移出";
                   }
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <h1>年齡:{{age}}</h1>
         <h1 id="mouse">當前滑鼠動作</h1>
         <button @click="age = 20">設定年齡為20</button>
         <button @click="play">設定年齡為40</button>
         <button @click="playWithPara(50)">根據引數設定年齡</button>

         <button v-on="{mouseover:onOver,mouseout:onOut}">繫結多個事件</button>
    </div>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

Vue.js中v-on指令的用法介紹

v-on指令

注意：

注意：v-on的縮寫@

熱門文章