vue.js绑定事件监听器(v-on)

最新推荐文章于 2024-03-25 11:09:46 发布

Code Pupil

最新推荐文章于 2024-03-25 11:09:46 发布

阅读量2.1k

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/code_pupil/article/details/79677974

版权

vue.js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Vue.js -->
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="show">这是一段文本</p>
    <buttton v-on:click="handleClose">点击隐藏</buttton>
</div>
</body>
</html>
<script>
    //当数据show的值为true时，p元素会被插入，为false时会被移除
    var myData = {
        show:true
    };
    var app = new Vue({
        el:'#app',
        data:myData,
        //在普通元素上，v-on可以监听原生的DOM事件，除了click外，还有dbclick、keyup、mousemove等。表达式可以是一个方法名，这些方法都写在vue实例的methods属性内，并且是函数的形式，函数内的this指向的是当前vue实例本身，因此可以直接使用this.xxx的形式来访问或者修改数据，如实例中的this.show = false;把数据show修改为了false，所以点击按钮时，文本p元素就被移除了
        methods:{
            handleClose:function () {
//                this.show = false

                //在handleClose方法内，直接通过close()调用了close函数。在示例中是多此一举的，只是用于演示它的用法
                this.close()
            },
            close:function () {
                this.show = false
            }
        }
    })
</script>

Code Pupil

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js绑定事件监听器(v-on)

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
复制链接

扫一扫