HTML代码:
<div title="意向价格" v-if="showPrise"></div>
<div title="意向租金" v-show="showRentPrise"></div>
JS代码:
new Vue({ el: '#app', data: { showPrise:false, showRentPrise:false } methods: { changeStatus(){ if("你设置的条件"){ this.showPrise = true; this.showRentPrise = true; } } } })
解释:
默认showPrise
和showRentPrise
的状态是false
,所以是隐藏的。
当你在changeStatus
通过了某种条件,你就可以控制showPrise
和showRentPrise
的状态了。true为显示,false为隐藏。
注意点:
v-if
控制 DOM的删除和添加,不同于v-show
对DOM的显示和隐藏