vue2中的枚举数据使用

全局使用法

第一步：创建一个专门写枚举数据的文件夹然后里面放枚举数据js文件
第二步创建后枚举数据的js文件后在里面写枚举数据比如：

js文件中
const statustest = {
  a: 0,
  b: 1,
  c: 2
}

第三步：来到main.js中添加引用。 import {statustest}from "@/........文件的位置"。然后挂载到vue构造函数的原型对象上的 Vue.prototype.statustest = statustest
第四步：在vue页面使用、

组件中使用  示例
created(){
  console.log(this.statustest.a)   返回的是 0
}

局部使用

VUE3中如何使用枚举数据

枚举类型特点：，既有类型又有值，它的值默认是从0开始的，后面的值没有定义的话就会累加。

作用：表示一组明确可选的值，和字面量类型配合联合类型类似。
解释：枚举可以定义一组常量，使用该类型后，约定只能使用这组常量中的其中一个。
第一步：创建一个专门写枚举数据的文件夹在其中写入 ts文件--一般文件夹以 enums 命名
第二步：记得暴漏出去

export enum IllnessTime {
  //一周内
  Week = 1,    1 === Week 且  Week === 1
  /* 一月内 */
  Month,      下面的都不用写 因为会从第一个开始累加
  /* 半年内 */
  HalfYear,
  /* 半年以上 */
  More
}

第三步：在哪里使用就在哪里导入按需导入

例如

类型其特点案例

需要用到类型，导入时加type，import type {} from '路径'

不需要用到类型，导入时不加type，import {} from '路径'

如果第一个对应值，不是数字，那么就不会累加，而且必须写上值是多少，不然会报错

<template></template>

<script setup lang="ts">   这里用到了setup的语法糖！！！
/* 创建枚举数据 */
/* 可以发现 枚举数据是从头到尾从0 开始 往后的累加 */
enum Direction {
  UP, //0        而且这里UP就是 0   0就是 UP
  Down, //1
  Left, //2
  Right //3
}

/* 使用枚举数据 */
const res = (direction: Direction) => {
  console.log(direction) //这里打印出来的值就是 0
}

/* 传入值进去 */
res(Direction.UP) //这里传进去的参数实际上就是 0
</script>

<style></style>

这是第二种案例  


<template>
  <div>
    <h2>水果列表：</h2>
    <ul>
      <li v-for="(fruit, index) in fruits" :key="index">
        {
   
   { fruit }}
      </li>
    </ul>
  </div>
</template>
<script lang="ts">    这里没有用到setup  ！！
import { defineComponent } from 'vue';
enum Fruit {
  Apple = '苹果',
  Banana = '香蕉',
  Orange = '橘子'
}
export default defineComponent({
  data() {
    return {
      fruits: [Fruit.Apple, Fruit.Banana, Fruit.Orange]
    };
  }
});
</script>

以上只是简单的案例规范用法是要在src文件下创建一个专门写枚举数据的文件夹然后在里面写

VUE2/VUE3中枚举数据的使用

vue2中的枚举数据使用

全局使用法

局部使用

VUE3中如何使用枚举数据

例如

猜你喜欢