VueJS 组件上的 v-if

Question

需要一个简单的快速修复，当 .env 中的 NODE_ENV 不是“生产”时，我想在我的 VueJS 页脚上显示一个“DEVELOPMENT”标签。请帮忙。

<template>
    <footer class="app-footer font-xs" v-if="process.env.NODE_ENV !== 'production'">
        <span>© 2018 <b>PT Test</b>. All Rights Reserved.</span>
        <span class="ml-auto">DEVELOPMENT</span>
    </footer>
    <footer v-else class="app-footer font-xs">
        <span>© 2018 <b>PT Test</b>. All Rights Reserved.</span>
    </footer>
</template>

我的 .env 文件

NODE_ENV=local
TZ=Asia/Jakarta

Answer 1

所有 Vue 模板表达式都根据组件上下文进行评估。

将条件添加到组件的data对象中

data () {
  return {
    isProduction: process.env.NODE_ENV === 'production'
  }
}

并使用

v-if="!isProduction"