1. 程式人生 > >vue 控制某個元素的顯示與隱藏之v-if屬性

vue 控制某個元素的顯示與隱藏之v-if屬性

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.csdn.net/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>