zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    iOSIPV6简单测试环境搭建
    SQL存儲過程的調試方法
    Excel的 OleDb 连接串的格式
    RequiredFieldValidator的使用
    GridView導出Excel
    咳嗽對症下藥
    WCF基礎
    WCF配置文件全攻略
    WCF寄宿方式
    WCF綁定
  • 原文地址:https://www.cnblogs.com/lsongyang/p/13442216.html
Copyright © 2011-2022 走看看