Vue.js从0到1：v-on绑定事件 指令

  1. 代码演示

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-on监听事件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="../asserts/js/vue.js"></script>
</head>
<body>
    <h1>v-on监听事件</h1>
    <hr>
    <div id="app">
        score : {{count}} <br/>
        <button v-on:click="add">ADD</button>
        <button @click="reduce">REDUCE</button>
        <hr>
        <input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                count:1,
                secondCount:0
            },
            methods:{
                add:function(){
                    this.count++;
                },
                reduce:function(){
                    this.count--;
                },
                onEnter:function() { 
                    this.count = this.count + parseInt(this.secondCount);
                }
            }
        });

    </script>
</body>
</html>

  2. 代码重点

    • Vue方法

      methods:{
        add:function(){
           this.count++;
        },
        reduce:function(){
           this.count--;
        },
        onEnter:function() { 
           this.count = this.count + parseInt(this.secondCount);
        }
 }

    • v-on调用

      <button v-on:click="add">ADD</button>
<button @click="reduce">REDUCE</button>
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">

      学习链接： 技术胖

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容