Map对象是一个用来存储KEY/VALUE的数据结构，在前端编程中很实用，今天讲一个利用Map对象实现动态状态样式的小例子，方便大家理解这个对象的用法。

如上图，表格中，可根据不同的状态实现颜色和图标的变化。涉及到这么几块内容：

x-label组件

x-label组件实现标签的显示，其基本结构如下图所示：

我们定义了一套样式集sets，用Map对象实现，以定义不同状态下对应的样式方案，我们例子中样式方案比较简单，仅定义了styler和icon，前者用以指示用哪个样式类，如info、error、focus等；后者用以指示图标；这里我们用computed来实现从Map对象中获得样式配置，上图中，我们可以看到，Map对象用get实现选择子和样式定义的匹配和关联。在外部，我们可以如此使用x-label。

这里，我们有一个样式定义和一个选择子的定义，选择子是状态变量，不同的选择子对应着sets中不同的显示方案，在实际应用中，我们主要通过Map的get（key）方法获得value值。

样式定义

基于通用性考虑，我这里实现了一个混入对象stylers，该对象用Map来实现多个样式方案的容器。注意这里我们放了一个根据选择子从容器中获得单个样式的计算字段styler。

如果要定义表格上的某列，可以设置单个的样式对象如下：

在合适的位置将其加入到stylers容器中：

这里我们可以看到，这是Map对象的set用法，即设置对象的键值对，先定义表格某列的样式，然后再加入到stylers容器中，在对应的组件属性上，通过列选择子从stylers中获得对应样式。

综上，上述例子中主要使用了Map对象的：

• has方法，用以判断是否有选择子注册为Key值
• set方法，设置key，value值
• get方法，根据key值获得value

虽然比较简单，但如果运用得当，和Vue的一些其他工具结合使用，还是会为前端编程带来极大的便利。希望大家从这个小例子中能够有所启发，写出一些不一样的东西来。朋友们有什么问题或者想法，也随时欢迎大家和我进行交流，一起进步和提高。