当前位置:网站首页>On the problem of V-IF display and hiding
On the problem of V-IF display and hiding
2022-04-23 17:43:00 【Front Thoughts】
vue Conditional statements v-if Elegant writing when there are many conditions in
Common writing :
v-if=" type==1 || type==2 || type==3 "
Elegant writing :
v-if=" [1,2,3].includes(type) "
More advanced writing :
Usage method , High reusability , Applicable scenario : Multiple tags need to be used to judge , In such multiple tags v-if Just use matchState Method , Can make judgments
Pay attention to writing :matchState( A particular element ,/[ Match the value ]/)
In the label : v-if="matchState(type,/[123]/)"
In the method : methods: {
// Judge the state
matchState(state = '', reg) {
return !!String(state).match(reg)// return true/false
}
}
VUE in if Conditional statements || And && Use
1、|| And && Use at the same time
v-if="!item.type && (item.receiveStatus === 1 || item.receiveStatus === -1 )"
2、 Just use || stay if Use... In conditional statements (|| The relationship between conditions is or )
v-if="item.coolStorage'–' || item.coolStorage' ' ? flag : !flag"
3、 Just use && stay if Use... In conditional statements (&& The two conditions must be consistent )
v-if="item.coolStorage'–' && item.coolStorage'' ? flag : !flag"
4、vue Determine whether a value is true , The judgment condition is multiple values
<button class="action cu-btn" v-if="isContentShow([-1, 3, 4, 7], item.status)" @click.stop="delOrder(item, index)"> Delete order </button>
*computed Calculation and monitoring in :
Usually write hair :
<div class="item_margin"
v-show="itemList.supplierName || itemList.StoreName || itemList.ContactName || itemList.Phone">
</div>
More beautiful ( Dad ) Writing :
<div class="item_margin" v-show="showSupplier"></div>
computed: {
showSupplier () {
return this.itemList.supplierName || this.itemList.supplierStoreName || this.itemList.ContactName || this.itemList.ContactPhone
}
}
版权声明
本文为[Front Thoughts]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204230551157105.html
边栏推荐
- Webapi + form form upload file
- HCIP第五次实验
- JS failed to change all variables and changed to the return method. Finally, the problem was solved
- 2022年上海市安全员C证操作证考试题库及模拟考试
- Why do some people say SCM is simple and I have to learn it so hard?
- 122. The best time to buy and sell stocks II - one-time traversal
- 440. 字典序的第K小数字(困难)-字典树-数节点-字节跳动高频题
- Learning record of uni app dark horse yougou project (Part 2)
- Summary of common SQL statements
- Leak detection and vacancy filling (VIII)
猜你喜欢
MySQL进阶之索引【分类,性能分析,使用,设计原则】
Halo open source project learning (II): entity classes and data tables
双闭环直流调速系统matlab/simulink仿真
Flash project cross domain interception and DBM database learning [Baotou cultural and creative website development]
Advantages and disadvantages of several note taking software
Element calculation distance and event object
How to change input into text
Kubernetes 服务发现 监控Endpoints
练习:求偶数和、阈值分割和求差( list 对象的两个基础小题)
Tdan over half
随机推荐
JVM class loading mechanism
Learning record of uni app dark horse yougou project (Part 2)
Future usage details
Using quartz under. Net core -- preliminary understanding of [2] operations and triggers
Manually implement call, apply and bind functions
uni-app黑马优购项目学习记录(下)
SiteServer CMS5. 0 Usage Summary
開期貨,開戶雲安全還是相信期貨公司的軟件?
剑指 Offer 03. 数组中重复的数字
470. Rand10() is implemented with rand7()
Open futures, open an account, cloud security or trust the software of futures companies?
[difference between Oracle and MySQL]
Using quartz under. Net core -- a simple trigger of [7] operation and trigger
Websocket (basic)
The system cannot be started after AHCI is enabled
Entity Framework core captures database changes
92. Reverse linked list II byte skipping high frequency question
超分之TDAN
2021长城杯WP
48. 旋转图像