《前端》vue迷之解惑--v-show--2020年6月9日

相同點：v-if與v-show都可以動態控制dom元素顯示隱藏

不同點：v-if顯示隱藏是將dom元素整個添加或刪除，而v-show隱藏則是爲該元素添加css--display:none，dom元素還在。

1、判斷謀個元素是否顯示或隱藏

<el-button v-show="list.power == 1" @click="toUpload" class="toUpload" type="primary">去上傳<i class="el-icon-upload el-icon--right"></i></el-button>

通過接口裏的參數list.power是否等於1，如果等於1，則爲“true”，否則爲“false”，然後v-show指令，等於true的時候顯示，false的時候隱藏。

再如：外協裏在managetask.jsp中這樣用，來實現一個界面通過點“查詢”跳到另個界面。

<div v-show='showPic'></div>
<div v-show='!showPic'></div>

2、三目運算符判斷

<a class="warn" v-show="true ? item.ai != null : item.ai == null" :href="'http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url='+item.urlai">AI</a>

其實這個也可以簡寫成第一種形式

<a class="warn" v-show="!item.ai == null" :href="'http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url='+item.urlai">AI</a>

 

vue指令之v-show的用法_perry-CSDN博客_vuev-show  https://blog.csdn.net/weixin_38930535/article/details/80420747

https://blog.csdn.net/qiphon3650/article/details/73379198