zoukankan      html  css  js  c++  java
  • Vue事件的基本用法

    1、v-on:click='num++':绑定数据对象中num值;
    2、@click='num++'v-on缩写,绑定数据对象中num值;
    3、@click='handle':绑定函数对象handle;
    4、@click='handle()':绑定函数handle;

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <div>{{num}}</div>
            <div>
                <button v-on:click='num++'>点击</button>
                <button @click='num++'>点击1</button>
                <button @click='handle'>点击2</button>
                <button @click='handle()'>点击3</button>
            </div>
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
    
                    num: 0
    
                }, // 注意点: 这里不要忘记加逗号 
                // methods  中 主要是定义一些函数
                methods: {
    
                    handle: function() {
                        // 这里的this是Vue的实例对象+
                        console.log(this === vm)
                            //   在函数中 想要使用data里面的数据 一定要加this 
                        this.num++;
                    }
    
                }
    
            });
        </script>
    
    </body>
    
    </html>
    

    以上注解都是粗糙理解,不当之处请指出,谢谢;

  • 相关阅读:
    python基础-网络编程part01
    常见的加密算法
    mvn常用命令
    Stream排序Map集合
    解决浮点运算精度不准确,BigDecimal 加减乘除
    阿里fastjson解析
    java可变参数
    set集合迭代
    包装类型间的相等判断
    java集合与数组之间转换
  • 原文地址:https://www.cnblogs.com/apebro/p/12601259.html
Copyright © 2011-2022 走看看