美文网首页VUE
dom 和 vue 控件的显示与隐藏

dom 和 vue 控件的显示与隐藏

作者: cain07 | 来源:发表于2021-07-08 16:29 被阅读0次

    dom写法
    1、隐藏后指定位置页面上占空位。

    document.getElementById("EleId").style.visibility="hidden";//设置EleId标签隐藏
    document.getElementById("EleId").style.visibility="visible";//设置EleId标签显示
    

    2、隐藏后指定位置页面的内容不被占用

    document.getElementById("EleId").style.display="none";//设置EleId标签隐藏
    document.getElementById("EleId").style.display="inline";//设置EleId标签显示
    

    vue写法

     <div title="意向价格"   v-if="showPrise"></div> 
     <div title="意向租金"   v-show="showRentPrise"></div>
    
    new Vue({
            el: '#app',
            data: {
                showPrise:false,
                showRentPrise:false
             } 
            methods: {
               changeStatus(){
                  if("你设置的条件"){
                      this.showPrise = true;
                      this.showRentPrise = true;  
                  }
               }
            }
         })
    

    注意点:

    v-if控制 DOM的删除和添加,不同于v-show对DOM的显示和隐藏

    相关文章

      网友评论

        本文标题:dom 和 vue 控件的显示与隐藏

        本文链接:https://www.haomeiwen.com/subject/wxezyltx.html