如何在vue中优雅地使用v-if判断

Posted 2021-08-29 铁锤妹妹@

情况一：做vue项目，有的时候会遇到有几个元素都使用同一个v-if条件。

下面这种方法虽然可以实现，但是整体代码看起来有点笨拙，我们可以用<template>标签进行优化一下。

<template>
  <div class="card">
    <img src="../../assets/image/background frame.png" />
    <h3 v-if="expanded">123</h3>

    <h4 v-if="expanded">456</h4>
    <div class="card-content" v-if="expanded">789</div>
    <img v-if="expanded" src="../../assets/image/background frame.png" />
  </div>
</template>

<template> 标签可以在模板中的任何地方使用，现在我们使用<template> 标签来分组同一个条件判断的这些元素，并将v-if提升到模板template本身。
这样使用就可以让下面4个标签同时控制了。
template标签跟div标签或者其他标签最大区别就是不会作为渲染的结果（f12看不到）。

<template>
  <div class="card">
    <img src="../../assets/image/background frame.png" />
    <template v-if="expanded">
      <h3>123</h3>
      <h4>456</h4>
      <div class="card-content">789</div>
      <img src="../../assets/image/background frame.png" />
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      expanded: true
    };
  }
};
</script>

<style></style>

情况二：v-if中条件较多时优雅写法

普通写法，代码有点冗余

v-if=" type==1 || type==2 || type==3 "

优雅写法

v-if=" [1,2,3].includes(type) "

情况三：经常使用v-if、v-else-if、v-else通过条件来判断具体显示某种信息

<template>
  <div class="card">
    <span v-if="type == 1">苹果</span>
    <span v-else-if="type == 2">香蕉</span>
    <span v-else-if="type == 3">西瓜</span>
    <span v-else>橘子</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 3
    };
  }
};
</script>

<style></style>

页面显示 西瓜
这种情况代码显示繁琐。 我们就可以使用过滤器来处理。
vue中分为局部过滤器和全局过滤器

1) 局部过滤器

<template>
  <div class="card">
    <span>{{ type | fruitFilter }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 7
    };
  },
  filters: {
    fruitFilter(value) {
      switch (value) {
        case 1:
          return "苹果";
          break;
        case 2:
          return "香蕉";
          break;
        case 3:
          return "西瓜";
          break;
        default:
          return "其他水果";
          break;
      }
    }
  }
};
</script>

<style></style>

type是要判断的类型，fruitFilter是自定义的局部过滤器。
fliters所在位置是跟data和vue的生命周期同一级别。

2) 全局过滤器
如果是公共使用的可以在main.js自定义全局

/*全局过滤器 */
Vue.filter('fruitFilter', function(value) {
  switch (value) {
    case 1:
      return "苹果";
      break;
    case 2:
      return "香蕉";
      break;
    case 3:
      return "西瓜";
      break;
    default:
      return "其他水果";
      break;
  }
})

如有其他简化方法以后继续更新