Javascript 如何在VueJS中使用枚举（或常量）？

我觉得自己像个白痴，因为我不得不问一些看似简单的问题，但我正试图弄清楚如何在VueJS中使用“enums”。目前，在一个名为

LandingPage.js

的文件中，我有以下代码：

const Form={
登录名：0，
报名：1，
忘记密码：2，
};
函数main（）{
新Vue({
el:#登录页“，
组成部分：{
LoginForm，
谁在后面，
WhatIsSection，
形式，
},
数据（）{
返回{
表单：form.LOGIN，
};
},
模板：`
`
});
}

有条件的

v-if=“form===form.LOGIN”

失败并显示错误消息：

• 属性或方法“Form”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的

• 无法读取未定义的属性“LOGIN”

你们知道，没有条件，一切都正常，如果我把这部分放在模板中

<p>{{ form }}</p>

<p>{{ Form.LOGIN }}</p>

不会导致it在屏幕上打印

0

。所以我一辈子都搞不明白为什么它不接受

Form.LOGIN

答案

我确实将它添加到了

组件

，但我从未想过将它添加到

数据

。很高兴它现在起作用了。：）

数据（）{
返回{
表单：form.LOGIN，
表单，//我必须添加这个位
};
},

---

谢谢您只能访问模板中Vue实例的属性。例如，只需访问

窗口

或模板中的任何全局文件即可

因此，您可以访问

{{form}

，但不能访问

{{form.LOGIN}

有人猜测这与Vue的编译方式有关，但我对其内部结构了解不够，无法回答这个问题

---

所以，只需在Vue实例中声明您希望在模板中使用的所有属性（通常为

数据

）。

您可以将enum包含在类中。您的所有数据、状态和枚举变量都将位于一个位置。行为也是如此，因此您将调用

form.isLogin（）

而不是

form==form.LOGIN

和

form.setLogin（）

而不是

form=form.LOGIN

要生成枚举的类：

class Fenum {
  constructor(start, variants) {
    this.state = start;

    variants.forEach(value => {
      const valueC = value.charAt(0).toUpperCase() + value.slice(1);
      this['is' + valueC] = () => this.state === value;
      this['set' + valueC] = () => this.state = value;
    })
  }
}

用法示例：

function main() {
  new Vue({
    el: "#landing-page",
    components: {
      LoginForm,
      WhoIsBehindSection,
      WhatIsSection,
      Form,
    },
    data () {
      return {
        form: new Fenum("login", ["login", "signUp", "forgotPassword"]),
      };
    },
    template: `
    <div>
      <LoginForm v-if="form.isLogin()"></LoginForm>
      <WhatIsSection></WhatIsSection>
      <WhoIsBehindSection></WhoIsBehindSection>
    </div>
    `
  });
}

函数main（）{
新Vue({
el:#登录页“，
组成部分：{
LoginForm，
谁在后面，
WhatIsSection，
形式，
},
数据（）{
返回{
表格：new Fenum（“登录”、“登录”、“注册”、“放弃密码”），
};
},
模板：`
`
});
}

Vue观察嵌套对象，因此每次调用set方法（

from.setLogin（）

，

form.setSignUp（）

，…）都会触发组件的更新

此示例中生成的对象：

您可以使用

---

如果在Typescript中使用Vue，则可以使用：

import { TernaryStatus } from '../enum/MyEnums';  

export default class MyClass extends Vue {

      myVariable: TernaryStatus = TernaryStatus.Started;

      TernaryStatus: any = TernaryStatus;  

 }

然后在模板中，您可以使用

<div>Status: {{ myVariable == TernaryStatus.Started ? "Started It" : "Stopped it" }}</div>

状态：{{myVariable==TernaryStatus.Started？“Started It”：“Stopped It”}

您可以使用$options而不是$data

https://vuejs.org/v2/api/#vm-选项

最简单的方法

在main.js中

const enumInfo = {
  SOURCE_TYPE: {
    WALLET: 1,
    QR: 2
  }
}

Vue.prototype.enumInfo = enumInfo

index.vue

{{enumInfo}}

---

您还可以在Vue实例中的数据函数外部添加表单枚举。之后，您可以使用$options.form.LOGIN访问表单枚举，例如.Tbh。如果它是常量，最好将其声明为计算值。（computed:someComputed（）{return'abc'}）。数据属性是可修改的，它们唤起了“此组件中的某些方法更改此数据属性”的意图，但如果您看到一个立即返回常量值的计算结果，您知道它一眼就不会更改。无需使用

：any

<代码>三元状态=三元状态工作正常。绝对正确。

{{enumInfo}}