【Vue】5. v-on指令

最新推荐文章于 2022-09-23 11:47:30 发布

wowpH

最新推荐文章于 2022-09-23 11:47:30 发布

阅读量226

点赞数

分类专栏： Vue 文章标签： Vue HTML JavaScript

本文链接：https://blog.csdn.net/pfdvnah/article/details/108891250

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

前言
示例
总结

前言

本文主要学习v-on指令的使用，同时也用到了v-bind指令。
使用v-on指令添加事件监听器，通过它调用Vue实例中定义的方法，增加用户与应用的交互性。

下述代码是一个用按钮控制灯泡状态的示例。

示例

<!DOCTYPE html>
<html>

<head>
    <title>v-on指令</title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <!-- 添加style样式进行居中展示 -->
        <div style="text-align: center;">
            <!-- 灯泡图片 -->
            <img :src="imgSrc" />
            <!-- 开关按钮 -->
            <button v-on:click="switchBulb">开关</button>
            <!-- 上一行代码可以简写为 -->
            <button @click="switchBulb">开关</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isUp: false,// 灯泡是否亮起
                lightUp: '../img/light-up.gif',  // 灯泡亮起的图片
                lightOut: '../img/light-out.gif',// 灯泡熄灭的图片
                imgSrc: '../img/light-out.gif'   // 绑定到img标签的src属性
            },
            methods: {
                // 开关灯
                switchBulb: function () {
                    if (this.isUp) {
                        // 如果灯是亮的，切换到熄灯状态
                        this.isUp = false;
                        // 并将灯的图片切换为熄灯图片
                        this.imgSrc = this.lightOut;
                    } else {
                        this.isUp = true;
                        this.imgSrc = this.lightUp;
                    }
                }
            }
        });
    </script>
</body>

</html>