Vue —— 按钮事件

  • v-on
为页面元素绑定各种事件。（keydown, keyup, click, dbclick, load, etd.）分别是：按键按下、按键弹起、鼠标点击、双击鼠标、装载等等
<!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>button.html</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="example">
        <p>您最喜欢的游戏是：{{game}}</p>
        <!-- v-on:click的冒号不能有空格，否则无效 -->
        <!-- v-on:click绑定事件，这里选择的是鼠标单击 -->
        <button v-on:click="btn_click('我的世界')">我的世界</button>
        <button v-on:click="btn_click('魂斗罗2')">魂斗罗2</button>
        <button v-on:click="btn_click('忍者神龟')">忍者神龟</button>
        <!-- @ 就是 v-on: 这五个字符组合的缩写 -->
        <button @click="btn_click('蜜蜂大战')">蜜蜂大战</button>
    </div>
</body>
<script>
    new Vue({
        //直接使用名字就是，标签选择器，第一个标签
        //el: "div",
        //id选择器
        el: "#example",
        data: {
            game: '超级玛丽'
        },
        methods: {
            btn_click:function(game_name) {
                this.game = game_name;
            }
        }
    });
</script>
</html>

 

posted @ 2020-10-23 21:25  a最简单  阅读(3753)  评论(0)  编辑  收藏  举报