如何让 Switch/Case 只查看特定断点？答案

【问题标题】：How can I make Switch/Case only look at specific breakpoint?如何让 Switch/Case 只查看特定断点？
【发布时间】：2021-12-16 15:08:01
【问题描述】：

我正在运行一个查看 Vuetify 断点的开关/案例，但不是只取名称并给我我想要的 int，它总是最终取“limitSize”变量的最高数字。

这是我正在处理的新闻滑块，根据断点，它在滑块中显示一个、两个或三个元素。我试过给变量一个默认值，但这没有用。我希望它去 SM & down 是 1，MD 是 2，LG & Up 是 3，但我不确定实现这一目标的正确方法是什么。任何帮助将不胜感激。

以下是位于计算属性内的 Switch/Case。我还附上了代码当前结果的图像（当我想要 2 时，图像在 MD 窗口上）

VueJS

   pageOfWhatsNews() {
      var limitSize;
      switch (this.$vuetify.breakpoint.name) {
        case "xs":
          limitSize = 1;
        case "sm":
          limitSize = 1;
        case "md":
          limitSize = 2;
        case "lg":
          limitSize = 3;
        case "xl":
          limitSize = 3;
      }
      var start = (this.currentPage - 1) * limitSize;
      var end = (this.currentPage - 1) * limitSize + limitSize;
      return this.whatsNews.slice(start, end);
    }

【问题讨论】：

标签： vue.js switch-statement vuetify.js

【解决方案1】：

嗯，这是因为您在 switch cases 之间缺少 break 语句。查看下面switch-case 块的正确语法：

Switch-Case 语法

const expr = 'Papayas';
switch (expr) {
  case 'Oranges':
    console.log('Oranges are $0.59 a pound.');
    break;
  case 'Mangoes':
  case 'Papayas':
    console.log('Mangoes and papayas are $2.79 a pound.');
    // expected output: "Mangoes and papayas are $2.79 a pound."
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`);
}

解决方案

function pageOfWhatsNews() {
  var limitSize;
  switch (this.$vuetify.breakpoint.name) {
    case "xs":
      limitSize = 1;
      break;
    case "sm":
      limitSize = 1;
      break;
    case "md":
      limitSize = 2;
      break;
    case "lg":
      limitSize = 3;
      break;
    case "xl":
      limitSize = 3;
      break;
  }
  var start = (this.currentPage - 1) * limitSize;
  var end = (this.currentPage - 1) * limitSize + limitSize;
  
  console.log(limitSize);
  // return this.whatsNews.slice(start, end);
}

// Just for demo
this.$vuetify = {breakpoint: {name: 'md'}};
pageOfWhatsNews();

优化方案

我还建议您将md、lg 和xl 断点的案例和其余断点案例回退到default 案例。

function pageOfWhatsNews() {
  var limitSize;
  switch (this.$vuetify.breakpoint.name) {
    case "md":
      limitSize = 2;
      break;
    case "lg":
      limitSize = 3;
      break;
    case "xl":
      limitSize = 3;
      break;
    default: 
      limitSize = 1;
  }
  var start = (this.currentPage - 1) * limitSize;
  var end = (this.currentPage - 1) * limitSize + limitSize;
  
  console.log(limitSize);
  // return this.whatsNews.slice(start, end);
}

// Just for demo
this.$vuetify = {breakpoint: {name: 'sm'}};
pageOfWhatsNews();

【讨论】：