zoukankan      html  css  js  c++  java
  • v-on事件绑定指令

    v-on:事件绑定

    v-on简写:@

    绑定click事件时;

    代码:

    <script>
            window.onload= () =>{
                
                
                let vm=new Vue({
                el:'#two',
                data:{
                
    
                },
                methods:{
                    
                    show:function(){
                        alert("欢迎来到perfect*博客园!!!");
                        console.log('欢迎来到perfect*博客园!!!');
                    },
                    
        
                }
                })
            }
                
    </script>
        
        <body>
            <div id="two">
                <button v-on:click="show">欢迎来到perfect*博客园</button>
                
                
          </div>
        </body>

     执行click事件时进行数据的相加:

         

    vue:

    <script>
            window.onload= () =>{
                
                
                let vm=new Vue({
                el:'#two',
                data:{
                    result:0
                
    
                },
                methods:{
                    
    
                    
                    add(a,b){
                        console.log("add");
                        console.log(this==vm);
                        this.result=a+b;
                        
                    }
                }
                })
            }
                
    </script>

    html:

    <div id="two">
                
                
                <button v-on:click="add(1,2)">进行绑定数据相加的方法add()</button>
                result:{{result}}
                
                
          </div>

    使用v-on的简写@时:

     在vue中修改add方法即可:

    add(a,b){
                        console.log("add");
                        console.log(this==vm);
                        this.result +=a+b;
                        
                    }

    使用v-on的简写@:

    <button @click="add(1,2)">进行绑定数据相加的方法add()</button>
                result:{{result}}
            

    以上示例所有代码:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>v-on</title>
     6     </head>
     7     <script type="text/javascript" src="../js/vue.js" ></script>
     8     <script>
     9         window.onload= () =>{
    10             
    11             
    12             let vm=new Vue({
    13             el:'#two',
    14             data:{
    15                 result:0
    16             
    17 
    18             },
    19             methods:{
    20                 
    21 //                show:function(){
    22 //                    alert("欢迎来到perfect*博客园!!!");
    23 //                    console.log('欢迎来到perfect*博客园!!!');
    24 //                },
    25                 
    26                 add(a,b){
    27                     console.log("add");
    28                     console.log(this==vm);
    29                     this.result +=a+b;
    30                     
    31                 }
    32             }
    33             })
    34         }
    35             
    36 </script>
    37     
    38     <body>
    39         <div id="two">
    40             <!--<button v-on:click="show">欢迎来到perfect*博客园</button>-->
    41             
    42            <button @click="add(1,2)">进行绑定数据相加的方法add()</button>
    43             result:{{result}}
    44         
    45             
    46             
    47             
    48       </div>
    49     </body>
    50 </html>
    使用v-on绑定事件

    注意:在编写代码中如果使用简写,所有需要用到的地方都用简写哦!!!!

  • 相关阅读:
    pyspider 在ubuntu上安装失败怎么搞?
    怎么在项目中使用前端包管理器bower和构建工具gulp
    Asp.net mvc 实时生成缩率图到硬盘
    如果转载优酷、土豆视频等,怎么让视频自适应宽度?
    C语言II博客作业04
    C语言I博客作业03
    C语言II博客作业02
    C语言II博客作业01
    学期总结
    The first essay
  • 原文地址:https://www.cnblogs.com/jiguiyan/p/10701130.html
Copyright © 2011-2022 走看看