Problem beim Hinzufügen von Ausdrücken zu v-show in Vue (bestimmen, ob angezeigt werden soll)-js-Tutorial-php.cn

Problem beim Hinzufügen von Ausdrücken zu v-show in Vue (bestimmen, ob angezeigt werden soll)

亚连

Freigeben： 2018-05-29 09:41:34

Original

2189 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Problem des Hinzufügens von Ausdrücken in V-Show vorgestellt, um zu bestimmen, ob diese angezeigt werden sollen. Es gibt zwei Zeilen mit Optionen: Datenquelle und Beschriftungstyp, die angeklickt werden müssen . Wenn eine der oben genannten Datenquellen verwendet wird, wechselt der Etikettentyp automatisch die Funktion 🎜> 1. Lassen Sie mich zunächst über meine Bedürfnisse sprechen. Es gibt zwei Zeilen mit Optionen: Datenquelle und Etikettentyp, wie in der folgenden Abbildung dargestellt:

2. Entsprechend Je nach Bedarf muss ich auf das obige klicken. Wenn eine bestimmte Datenquelle ausgewählt wird, werden die folgenden Tag-Typen automatisch umgeschaltet.

Die Anforderungen werden wie folgt beschrieben:

3. Zuerst wollte ich verschiedene Situationen auf der Seite aufschreiben, die Sammlung von Datenquellen kann so geschrieben werden Identifikator jedes Typs, Name ist der Name und Markierung ist der Beschriftungstyp, wenn auf eine bestimmte Datenquelle geklickt wird, um sie zu beurteilen und zu wechseln. Wie unten gezeigt:

 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;
 }
],

Nach dem Login kopieren

4. Dann ist die Datenstruktur der Tag-Typ-Sammlung wie folgt, wobei das Markierungsfeld speichert, welche Datenquellen im aktuellen enthalten sind Etikett.

rrree

5. Fügen Sie jedem Namen der Datenquelle ein Klickereignis hinzu und speichern Sie eine Variable infoTypeMark in den Daten, um die angeklickte Datenquellenidentifikation zu speichern habe auch den Code der Datenquelle gepostet.

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;
},
],

Nach dem Login kopieren

6. Der entscheidende Punkt ist die folgende Codezeile, die zur Beurteilung angeklickter Nachrichten verwendet wird Highlights sollten hauptsächlich angezeigt werden. Schauen Sie sich den rot markierten Block an. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Tag-Typ

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

Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Einführung in die Probleme und Unterschiede zwischen den Funktionen apply und Math.max() in js

Eine kurze Diskussion über Anwendungsszenarien der integrierten Komponentenkomponenten von Vue

Ein einfaches Tutorial zur Verwendung von weniger in vue2

Das obige ist der detaillierte Inhalt vonProblem beim Hinzufügen von Ausdrücken zu v-show in Vue (bestimmen, ob angezeigt werden soll). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!