爱编程

Vue基础篇:v-on用法

2018-10-12  本文已影响10人  一叶扁舟丶

v-on,它是来绑定事件监听器,这样我们就可以做一些交互了.

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例</title>

</head>
<body>

    <div id="app">
        <p v-if="show">这是一段文本</p>
        <button v-on:click="handleClose">点击隐藏</button>
    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <script>

        var app = new Vue ({
            el: '#app',
            data: {
                show: true
            },
            methods: {
                handleClose: function () {
                    this.show = false;
                }
            }
        })

    </script>

</body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读