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