vue点击事件

最新推荐文章于 2023-05-02 14:38:05 发布

寻找三叶

最新推荐文章于 2023-05-02 14:38:05 发布

阅读量200

点赞数

本文链接：https://blog.csdn.net/zcj_dmw/article/details/115119804

版权

效果

点击显示红色div 在这里插入图片描述
在点击隐藏div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vueTest</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        button{
            font-size: 24px;
        }
        .divShow{
            height: 100px;
            width: 100px;
            background: red;
        }
    </style>

</head>
<body>
<div id="app">
    <button v-on:click="controDivShow">{{btnText}}</button>
    <div v-if="isShow" class="divShow"></div>
</div>
<script type="text/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            isShow:false,
            btnText:"显示Div"
        },
        methods:{
            controDivShow:function (ev){
               alert(ev.target.innerText);
               this.isShow=!this.isShow;
               this.btnText=this.isShow?"隐藏Div":"显示Div";
            }
        }


    });
</script>
</body>
</html>

注意点：

methods:{
            controDivShow:function (ev){
               alert(ev.target.innerText);
               this.isShow=!this.isShow;
               this.btnText=this.isShow?"隐藏Div":"显示Div";
            }
        }

1.在方法内部引用data:{}中的数据，要用this.xxx

2.function(ev){},ev代表的是触发该方法的事件，这里代表的是点击事件
3.alert(ev.target.innerHtml),ev.target表示该事件所作用的控件，这里代表<button></button> ,target.html代表控件中的内容文字。

寻找三叶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue点击事件

效果点击显示红色div在点击隐藏div<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <script src="https://cdn.jsdelivr.net/n
复制链接

扫一扫