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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM