Vue —— 事件处理器

  • v-on:(event)/@(event)
页面元素的事件绑定（click,keyup,load等等）
这里的样例需要去 Console 控制台看效果
<!DOCTYPE html>
<html>
<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>event.html</title>
    <script src="../js/vue.js"></script>
    <link type='text/css' rel='styleSheet' href='../css/style.css' >
</head>

<body>
    <div id="example">
        <!-- 按键抬起事件 -->
        <input id="txt_name" @keyup="txt_keyup($event)">
        <!-- 鼠标点击事件 -->
        <button id="btn_ok" @click="btnclick($event)">OK</button>
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {

        },
        methods: {
            //普通的事件函数
            txt_keyup: function(event) {
                this.debugLog(event);
            },
            btnclick: function(event) {
                this.debugLog(event);
            },
            //控制台打印内容
            debugLog: function(event){
                console.log (
                    //控件类型
                    event.srcElement.tagName, 
                    //控件id
                    event.srcElement.id, 
                    //输出内部文本内容
                    event.srcElement.innerHTML, 
                    //键盘？是的话输出键值，否则输出空值，实际上就是鼠标点击时候不输出内容
                    event.key?event.key:""
                )
            } 
        }
    });
</script>
</html>

 

posted @ 2020-10-24 09:41  a最简单  阅读(154)  评论(0)    收藏  举报