網(wǎng)站首頁 Vue 正文
根據(jù)條件判斷屬性的添加和去除
寫一個列表,然后想要在查詢數(shù)據(jù)的過程中添加loading樣式,這個時候需要添加一個loading屬性,但是添加之后會有直接展示loading。
解決方法
:loading = isLoading
在下面需要注冊isLoading為boolean類型,如下:
isLoading:false/true
然后在開始查詢的時候改為false,查詢結(jié)果出來之后改為false
this.isLoading = true this.isLoading = false
Vue 的條件判斷語句
v-if
條件判斷用 v-if 指令
代碼示例:在元素中使用 v-if 指令
<div id="app"> ?? ?<input type="button" value='toggle' @click='flag=!flag'> ? ? <h3 v-if='flag'>v-if directive</h3> </div>
var vm = new Vue({ ?? ?el:'#app', ? ? data:{ ? ? ? ?flag:true ? ? }, ? ? methods:{} });
這里, v-if 指令將根據(jù)表達式 flag 的值 (true 或 false ) 來決定是否插入 h3 元素。
v-else
可以用 v-else 指令給 v-if 添加一個 “else” 塊
代碼示例:在元素中使用 v-if , v-else 指令
<div id="app"> ? ? <h3 v-if='flag'>Yes</h3> ? ? ? ? <h3 v-else='flag'>No</h3> </div>
var vm = new Vue({ ?? ?el:'#app', ? ? data:{ ? ? ? ?flag:true ? ? }, ? ? methods:{} });
這里, v-if,v-else 指令將根據(jù)表達式 flag 的值 (true 或 false ) 來決定是否插入 h3 元素以及元素中的值。
v-else-if
v-else-if 在 2.1.0 新增,用作 v-if 的 else-if 塊。可以鏈?zhǔn)降亩啻问褂?/p>
代碼示例:在元素中使用 v-if , v-else, v-else-if 指令
<div id="app"> ? ? <h3 v-if='star==="Jackson"'>Jackson</h3> ? ? ? ? <h3 v-else-if='star==="Lay"'>Lay</h3> ? ? ? ? <h3 v-else='star==="Yang"'>Yang</h3> </div>
var vm = new Vue({ ?? ?el:'#app', ? ? data:{ ? ? ? ?star:Jackson ? ? }, ? ? methods:{} });
v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之后。
v-show
v-show 跟 v-if 的效果差不多;但本質(zhì)有很大的區(qū)別。
代碼示例:v-if 與 v-show 的區(qū)別
? ? <div id="app"> ? ? ? ? <input type="button" value='toggle' @click='toggle'> ? ? ? ? <!-- 一般來說,v-if 有更高的切換消耗,而 v-show 有更高的初始渲染消耗。 ? ? ? ? 因此,如果需要頻繁切換:用 v-show 較好;如果在運行時條件不大可能改變: ? ? ? ? 用 v-if 較好 --> ? ? ? ? <h3 v-if='flag'>v-if directive</h3> ? ? ? ? <h3 v-show='flag'>v-show directive</h3> ? ? </div>
<script> ? ? var vm = new Vue({ ? ? ? ? el:'#app', ? ? ? ? data:{ ? ? ? ? ? ? flag:true ? ? ? ? }, ? ? ? ? methods:{ ? ? ? ? ? ? toggle(){ ? ? ? ? ? ? ? ? this.flag =! this.flag; ? ? ? ? ? ? } ? ? ? ? } ? ? }); </script>
v-if 與 v-show 的區(qū)別
區(qū)別一:
- v-if 是動態(tài)添加,當(dāng)值為 false時,是完全移除該元素,即 DOM 不存在;
- v-show 僅隱藏 / 顯示,值為 false 時,該元素依舊存在于 DOM,若其原樣式設(shè) display:none 則會導(dǎo)致其無法正常顯示
區(qū)別二:
- v-if 有較高的切換性能消耗
- v-show 有較高的初始渲染消耗
原文鏈接:https://blog.csdn.net/weixin_37817251/article/details/93855131
相關(guān)推薦
- 2023-10-15 el-input有時候添加不了有時候刪不了
- 2022-10-29 python實現(xiàn)k均值聚類(kMeans)基于numpy
- 2022-10-29 SQL?Server主鍵約束(PRIMARY?KEY)_MsSql
- 2022-04-23 排序會了遞歸,不學(xué)非遞歸太可惜了
- 2021-11-10 Android?Studio設(shè)置繪制布局時的視圖_Android
- 2022-06-19 C++學(xué)習(xí)筆記之類成員指針_C 語言
- 2022-06-11 Python開發(fā)桌面小程序功能_python
- 2022-07-26 SpringMVC的流程
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支