Vue —— 按钮事件

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue使用 v-on 或 @ 绑定按钮事件

  • 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>

以上是 Vue —— 按钮事件 的全部内容， 来源链接： utcz.com/z/376990.html

回到顶部