vue 标黄 使用了 void 函数返回值

在 Vue 中，如果你在模板中使用了一个 void 函数（返回值为 undefined），它会将返回值作为表达式的值，但是由于 undefined 不是一个可渲染的值，所以会导致模板编译出错。

解决这个问题的方法有两种：

1. 使用一个非 void 函数（返回一个可渲染的值）替代 void 函数，或者在 void 函数中返回一个可渲染的值。

2. 在模板中使用 v-if 或者 v-show 控制元素的显示和隐藏，而不是依赖 void 函数返回值控制元素的显隐。

例如，以下代码会报错：

<template>
  <div :class="getClass()">
    {{ voidFunction() }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: true
    }
  },
  methods: {
    voidFunction() {
      // do something
      // 不返回任何值，等同于返回 undefined
    },
    getClass() {
      return this.active ? 'active' : ''
    }
  }
}
</script>

可以改写成以下形式，避免使用 void 函数：

<template>
  <div :class="getClass()" v-if="show">
    <!-- 使用 v-if 控制元素显隐 -->
    {{ normalFunction() }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: true,
      show: true
    }
  },
  methods: {
    normalFunction() {
      // do something
      // 返回一个可渲染的值
      return 'hello world'
    },
    getClass() {
      return this.active ? 'active' : ''
    }
  }
}
</script>