VUE 사이클 값을 출력 한 후 레이블이 일치하는 항목을 찾을 수 있습니다

VUE 사이클 값을 출력 한 후 레이블이 일치하는 항목을 찾을 수 있습니다

템플릿 정보 팝업 상자를 표시 페이지가 :

물론 정의 된 표준 속성이 있습니다 :

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

데이터 수익의 목록이 있습니다 :

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

CTYPE가 tableData과의 classTypeList 일치하는 값에서 본 가능
하고있을 수있는이 값에 따라 라벨을 출력한다,
즉, 취득하는 ctype 목록 매칭 속성 값에 의해 팝업 박스 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에서 레이블을 해당)하려는,
그러나 출력은 "1"(CTYPE입니다 ),
우리가 V-및 V-쇼를 사용할 수 있도록
하면서 함께 사용할 수 있습니다 목록을 통과 ,
동안 경기에 맞춰 필터 필드 :

<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>

여기가 첫 번째 사진 효과 그것을 ℋᵅᵖᵖᵞ를 ♡ ᵕ̈ 표시 ​​할 수 있습니다 *