当前位置:网站首页>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
边栏推荐
- Hcip fifth experiment
- Where is the configuration file of tidb server?
- Using quartz under. Net core -- job attributes and exceptions of [4] jobs and triggers
- 102. Sequence traversal of binary tree
- 402. 移掉 K 位数字-贪心
- Node template engine (EJS, art template)
- Low code development platform sorting
- 练习:求偶数和、阈值分割和求差( list 对象的两个基础小题)
- MySQL installation
- 31. 下一个排列
猜你喜欢
Learning record of uni app dark horse yougou project (Part 2)
STM32 entry development board choose wildfire or punctual atom?
Double pointer advanced -- leetcode title -- container with the most water
Qt 修改UI没有生效
Use of five routing guards
92. 反转链表 II-字节跳动高频题
For the space occupation of the software, please refer to the installation directory
QT modification UI does not take effect
Qt error: /usr/bin/ld: cannot find -lGL: No such file or directory
为什么有些人说单片机简单,我学起来这么吃力?
随机推荐
Indexes and views in MySQL
Using quartz under. Net core -- general properties and priority of triggers for [5] jobs and triggers
HCIP第五次实验
Add drag and drop function to El dialog
[batch change MySQL table and corresponding codes of fields in the table]
Come out after a thousand calls
【Appium】通过设计关键字驱动文件来编写脚本
ECMAScript history
vite配置proxy代理解决跨域
402. 移掉 K 位数字-贪心
Hcip fifth experiment
Ouvrir des contrats à terme, ouvrir des comptes en nuage ou faire confiance aux logiciels des sociétés à terme?
Qt error: /usr/bin/ld: cannot find -lGL: No such file or directory
flink 学习(十二)Allowed Lateness和 Side Output
XTask与Kotlin Coroutine的使用对比
stm32入门开发板选野火还是正点原子呢?
Leak detection and vacancy filling (VIII)
[related to zhengheyuan cutting tools]
Seven cattle upload pictures (foreground JS + background C API get token)
209. 长度最小的子数组-滑动窗口