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

最新推荐文章于 2025-10-12 22:42:58 发布

原创最新推荐文章于 2025-10-12 22:42:58 发布 · 2.2w 阅读

5 ·

CC 4.0 BY-SA版权

本文为acoolgiser原创文章，转载请贴上原文链接。（公众号：acoolgiser）

文章标签：

#vue #v-if #元素显示与隐藏

vue.js 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何在Vue.js中使用v-if指令进行条件渲染，通过控制变量showPrise和showRentPrise的状态来显示或隐藏元素。同时，提供了一个基于Vue的示例，展示如何在点击事件中切换元素的显示状态。

HTML代码：

<div title="意向价格"   v-if="showPrise"></div>

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

JS代码：

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.youkuaiyun.com/qq_24147051/article/details/79771556

本人基于vue实现：

<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>