Vue에서 v-show에 표현식을 추가하는 데 문제가 있습니다(표시 여부 결정).-JS 튜토리얼-php.cn

Vue에서 v-show에 표현식을 추가하는 데 문제가 있습니다(표시 여부 결정).

亚连

풀어 주다： 2018-05-29 09:41:34

원래의

2123명이 탐색했습니다.

이 글에서는 Vue에서 표현식을 추가하여 표시할지 여부를 결정하는 문제를 주로 소개합니다. 많은 친구들이 종종 이러한 요구 사항에 직면합니다. 데이터 소스와 레이블 유형을 클릭해야 합니다. 위의 특정 데이터 소스를 사용하면 라벨 유형이 자동으로 전환됩니다. 관심 있는 친구들은 함께 살펴보세요

1. 수요 시나리오

1. 먼저 내 요구 사항에 대해 이야기하겠습니다. 라인: 아래 그림과 같은 옵션:

2. 요구 사항에 따라 위의 데이터 소스를 클릭하면 아래 레이블 유형이 자동으로 전환됩니다.

3. 처음에는 페이지에 모든 상황을 적어두고 싶었는데, 한동안 공식 문서를 확인해 본 결과, 데이터 소스 모음이 이렇게 작성될 수 있다는 것을 알게 되었습니다. 는 각 유형의 식별자이고, name은 이름, mark는 특정 데이터 소스에 대한 클릭입니다. 데이터 소스를 선택하면 현재 클릭된 데이터 소스를 기준으로 레이블 유형이 전환됩니다. 아래와 같이

 infoTypeList: [
 {
  id: 11,
  name: &#39;新闻&#39;,
  mark: &#39;news&#39;
 },
 {
  id: 13,
  name: &#39;论坛&#39;,
  mark: &#39;bbs&#39;
 },
 {
  id: 17,
  name: &#39;微博&#39;,
  mark: &#39;wb&#39;
 },
 {
  id: 6,
  name: &#39;微信&#39;,
  mark: &#39;wx&#39;
 },
 {
  id: 7,
  name: &#39;APP&#39;,
  mark: &#39;app&#39;
 },
 {
  id: 8,
  name: &#39;平媒&#39;,
  mark: &#39;pm&#39;
 },
 {
  id: 20,
  name: &#39;境外&#39;,
  mark: &#39;overseas&#39;
 },
 {
  id: 21,
  name: &#39;Facebook&#39;,
  mark: &#39;facebook&#39;
 },
 {
  id: 22,
  name: &#39;Twitter&#39;,
  mark: &#39;twitter&#39;
 }
],

로그인 후 복사

4. 그러면 태그 유형 수집 데이터 구조는 다음과 같으며, 마크 필드에는 현재 태그에 어떤 데이터 소스가 포함되어 있는지 저장됩니다.

markTypeList: [
{
id: 32,
name: &#39;主帖&#39;,
mark: &#39;bbs&#39;
},
{
id: 33,
name: &#39;回帖&#39;,
mark: &#39;bbs&#39;
},
{
id: 34,
name: &#39;原创&#39;,
mark: &#39;wb&#39;
},
{
id: 35,
name: &#39;转发&#39;,
mark: &#39;wb_wx&#39;
},
{
id: 36,
name: &#39;头条&#39;,
mark: &#39;news_app_wx_pm&#39;
},
{
id: 37,
name: &#39;头图&#39;,
mark: &#39;app&#39;
},
{
id: 38,
name: &#39;置顶&#39;,
mark: &#39;app&#39;
},
{
id: 39,
name: &#39;要闻&#39;,
mark: &#39;news&#39;
},
{
id: 40,
name: &#39;头版&#39;,
mark: &#39;pm&#39;
},
],

로그인 후 복사

5. 데이터 소스의 각 이름에 클릭 이벤트를 추가하고, 클릭된 데이터 소스 식별을 저장하기 위해 데이터에 변수 infoTypeMark를 저장합니다.

<p v-if="isShowSingleInfoType">
<label class="left-10">数据来源</label>
<span class="info-type activecolor" @click="changeInfoType(-1)">全部</span>
<span class="info-type" @click="changeInfoType(item.id, item.mark)" v-for="item in infoTypeList" :key="item.id">{{item.name}}</span>
<label class="multichoose">
<Button @click="toggleInfoType" size="small">+多选</Button>
</label>
</p>

로그인 후 복사

6. 핵심은 다음 코드 줄입니다. v-show에 표현식을 추가하면 클릭한 뉴스를 주로 보면서 표시해야 합니다. 코드는 다음과 같습니다.

<p class="layout-content-main">
<label class="left-10">

로그인 후 복사

태그 유형

</label>
<span class="mark-type activecolor" @click="changeMarkType(-1)">全部</span>
<span v-show="item.mark.indexOf(infoTypeMark) > -1" class="mark-type" @click="changeMarkType(item.id)" v-for="item in markTypeList" :key="item.id">{{item.name}}</span>
</p>

로그인 후 복사

위 내용은 앞으로 모두에게 도움이 되기를 바랍니다.