vue switch case里面传1-100返回true ,200-1000返回false写成一个方法,掉方法时怎么传值
时间: 2024-01-14 20:01:57 浏览: 71
vue 中几种传值方法(3种)
5星 · 资源好评率100%
你可以将这个switch语句封装成一个方法,然后在Vue组件中调用这个方法并传入参数。下面是一个示例代码:
```javascript
export function isInRange(num) {
switch (true) {
case num >= 1 && num <= 100:
return true;
case num >= 200 && num <= 1000:
return false;
default:
return null;
}
}
```
然后在Vue组件中调用这个方法,传入num作为参数,并将结果赋值给一个computed属性,例如:
```vue
<template>
<div>
<div v-if="isNumInRange">num在1-100之间</div>
<div v-else>num在200-1000之间</div>
</div>
</template>
<script>
import { isInRange } from './utils'; // 假设这个方法定义在了utils.js中
export default {
data() {
return {
num: 3
};
},
computed: {
isNumInRange() {
return isInRange(this.num);
}
}
};
</script>
```
当num等于3时,上面的代码会显示"num在1-100之间"这个元素。
阅读全文