vue循环value查找匹配项后输出其label_vue 如何去循环一个list 并且在list根据value查label-优快云博客

在Vue项目中，当需要在模板中循环遍历value，并找到与之匹配的label进行显示时，可以通过遍历数据列表实现。文章介绍了如何在详情弹出框中，根据ctype匹配classTypeList列表的value，从而正确显示对应的label，避免直接输出ctype的数值。通过v-for和v-show的结合使用，实现了匹配筛选的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue循环value查找匹配项后输出其label

页面template里有一详情显示弹出框：
在这里插入图片描述
定义课程的标准属性都有：

tableData: [ {
      cno: '12138',
      cname: '数据结构与算法',
      ctype:1,       //本次关注这里
      cStartTime:'2019',
      cEndTime:'2020',
      cterm:'1',
      cdetail:'进阶课你脑子还在不在',
      mstatus:0,
      tno:'0001',
     }, 。。。。。。（省略）。。。。
  ],

data return里有一列表：

 classtypeList: [{
       value: '0',
       label: '公共必修课'
   },{
       value: '1',
       label: '专业必修课'
   },{
       value: '2',
       label: '专业选修课'
   },{
       value: '3',
       label: '素质选修课'
   }],

可以看到在tableData中的ctype要和classTypeList中的某个value匹配，
然后输出这个value下的label即可，
也就是要在弹出框中通过获取的ctype匹配列表的value属性最终显示label属性。
弹出框中可以单独输出的代码块（图中的课程号、课程名等）可以这么写：
（定义了新空数组newData用来保存点鸡出来的所有数据）

<Row>
      <Col span="8" style="text-align: right;font-family:'Microsoft YaHei';font-size:9">课程号:</Col>
      <Col span="16"style="text-align: left">{{newData.cno}}</Col>
</Row>

但需要输出课程类型时遇到只能输出定义为ctype字段的数值，
也就是想要输出“专业选修课”（classTypeList下的某一value对应的label），
但是输出的却是“1”（ctype），
于是我们用 v-for 和 v-show ，
一起使用可以一边遍历列表 ，
一边筛选符合匹配项的字段：

<Row>
      <Col span="8"style="text-align: right">课程类型:</Col>
      <Col span="16"style="text-align: left">
          <span v-for="item in classtypeList" :value="item.value" :key="item.value" v-show="newData.ctype==item.value">{{ item.label }}</span>
      </Col>
</Row>