前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue 控制某个元素的显示与隐藏之v-if属性

vue 控制某个元素的显示与隐藏之v-if属性

作者头像
acoolgiser
发布2019-01-17 10:22:06
7.3K0
发布2019-01-17 10:22:06
举报
文章被收录于专栏:acoolgiser_zhuanlanacoolgiser_zhuanlan

HTML代码:

代码语言:javascript
复制
<div title="意向价格"   v-if="showPrise"></div>

 <div title="意向租金"   v-if="showRentPrise"></div>

JS代码:

代码语言:javascript
复制
new Vue({
        el: '#app',
        data: {
            showPrise:false,
            showRentPrise:false
         } 
        methods: {
           changeStatus(){
              if("你设置的条件"){
                  showPrise = true;
                  showRentPrise = true;  
              }
           }
        }
     })

解释: 默认showPrise和showRentPrise的状态是false,所以是隐藏的。  当你在changeStatus通过了某种条件,你就可以控制showPrise和showRentPrise的状态了。true为显示,false为隐藏。 参考:https://blog.csdn.net/qq_24147051/article/details/79771556 

本人基于vue实现:

代码语言:javascript
复制
<template>
    <div style="height: 100%">
         <div class="eagleMap" @click="toolEventSlot" v-if="showEagleMap"></div>
    </div>
</template>
<script>

    export default {
        showEagleMap: true,
        
        components: {

        },

        data () {  /*定义data property的地方*/
            return {

            }
        },  /*end of data()*/

        methods: {
            toolEventSlot()
            {
                this.showEagleMap = !this.showEagleMap;
            }
        },

        mounted:function(){
            
        }


    };/* end of export */

</script>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年11月30日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档