vue switch case里面传1-100返回true ,200-1000返回false
时间: 2023-12-07 15:05:54 浏览: 128
详解vue-cli下ESlint 配置说明
你可以使用JavaScript的switch语句结合逻辑运算符来实现这个功能。下面是一个示例代码:
```javascript
switch (num) {
case num >=1 && num <=100:
return true;
case num >=200 && num <=1000:
return false;
default:
return null; // 如果num不在1-100和200-1000之间,返回null或者其他值
}
```
在Vue组件中使用时,可以将这个代码放在computed属性中,然后根据computed属性的值来决定是否显示某个元素,例如:
```vue
<template>
<div>
<div v-if="isInRange">num在1-100之间</div>
<div v-else>num在200-1000之间</div>
</div>
</template>
<script>
export default {
data() {
return {
num: 3
};
},
computed: {
isInRange() {
switch (true) {
case this.num >=1 && this.num <=100:
return true;
case this.num >=200 && this.num <=1000:
return false;
default:
return null;
}
}
}
};
</script>
```
当num等于3时,上面的代码会显示"num在1-100之间"这个元素。
阅读全文