如何循环生成Element中的标签控件

分步阅读

在Element中，可用来进行标记和选择的控件---el-tag，对应有不同的type。下面利用实例循环生成多个tag标签：

如何循环生成Element中的标签控件

工具/原料

方法/步骤

  1. 1

    第一步，打开HBuilderX开发工具，vue项目新建vue文件；输入文件名称，然后点击创建

    如何循环生成Element中的标签控件
  2. 2

    第二步，打开新建的vue文件，插入el-tag标签，并添加v-for，绑定循环变量

    如何循环生成Element中的标签控件
  3. 3

    第三步，在script标签中，初始化循环变量，设置type和显示内容

    如何循环生成Element中的标签控件
  4. 4

    第四步，打开vue项目配置页面路由文件，导入组件并配置路由

    如何循环生成Element中的标签控件
  5. 5

    第五步，保存代码并启动项目，打开浏览器，访问界面；结果出现了报错

    如何循环生成Element中的标签控件
  6. 6

    第六步，返回编辑器，检查代码，发现循环变量不对应；修改后保存代码，刷新浏览器，可以看到生成的多个标签

    如何循环生成Element中的标签控件
    END

注意事项

相关标签 JAVASCRIPT CSS