v-if 在 VueJS 组件上答案

【问题标题】：v-if on a VueJS componentv-if 在 VueJS 组件上
【发布时间】：2019-01-03 02:23:23
【问题描述】：

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

<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

【问题讨论】：

我没有投反对票，但您当然可以在这个问题中添加更多信息，例如您得到什么结果以及出现什么错误消息

标签： vue.js vuejs2 vue-component nuxt.js

【解决方案1】：

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

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

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

并使用

v-if="!isProduction"

【讨论】：

非常感谢菲尔，非常感谢您对这样一个新手问题的回答 :) 干杯！
在我看来这不是正确的方法。更好的是创建计算属性或扩展默认的 Vue 实例。数据应该用于表格等数据，...

【解决方案2】：

如果您需要使用，请检查是否可以在多个地方进行生产

Vue.prototype.$isProductionEnv = process.env.NODE_ENV === 'production'

然后在每个组件中它都会像这样可用。$isProductionEnv 所以

<div v-if="$isProductionEnv">Your contente</div>

【讨论】：