vue 控制某個元素的顯示與隱藏之v-if屬性
阿新 • • 發佈:2020-08-05
2019-01-17閱讀2.2K0
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>