Analyse der 4-v-bind-Anweisung (mit Code)-js-Tutorial-php.cn

Der Inhalt dieses Artikels befasst sich mit der Analyse der 4-V-Bind-Anweisung (mit Code). Sie hat einen guten Referenzwert und ich hoffe, dass sie Freunden in Not helfen kann.

1. Definition

1.1 Die v-bind-Direktive wird verwendet, um HTML-Attribute responsiv zu aktualisieren. Tatsächlich unterstützt sie einen einzelnen JavaScript-Ausdruck (außer v-for).

2. Grammatik

2.1 Vollständige Syntax: , Erklärung: v-bind ist ein Befehl, dem gefolgt wird by: Die Klasse ist ein Parameter, und classProperty wird in der offiziellen Dokumentation als „erwarteter Wert“ bezeichnet.

2.2 Abkürzungssyntax: , Erklärung:: Die folgende Klasse ist ein Parameter und classProperty wird in der offiziellen Dokumentation als „erwarteter Wert“ bezeichnet .

3. Verwendung

3.1 Eine Eigenschaft binden

Vollständiges Codebeispiel:

<template><p>
  </p>
<p>{{title}}</p>
  <span>{{text}}</span></template><script>
    export default {
        name: "v-bindLearn",
        data() {          return {
            title: "v-bind学习",
            first: "span1",
            text: "绑定一个属性"
          }
        }
    }</script><style>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }</style>

Nach dem Login kopieren

Abgekürztes Codebeispiel:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span :value="first" class="spancss1">{{text}}</span>
  </div>
</template>
<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        first: "span1",
        text: "绑定一个属性"
      }
    }
  }
</script>
<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Nach dem Login kopieren

3.2 Inline-String-Splicing-Codebeispiel

<template>
<div>
<p class="p1">{{title}}</p>
<a :href="&#39;http://&#39;+first" class="spancss1">{{text}}</a>
</div>
</template>
<script>
export default {
name: "v-bindLearn",
data() {
return {
title: "v-bind学习",
first: "www.baidu.com",
  text: &#39;点击跳转到百度链接&#39;
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>

Nach dem Login kopieren

3.3 Klassenbindung

3.3.1 Objektsyntax

Span-Tag bindet ein Objekt

Die Methode deklariert das Objekt immer direkt in der Vorlage, deklariert die Attribute prop1 und prop2 im Objekt und deklariert, ob die Attribute in Javascript ausgegeben werden auf true gesetzt, ist der deklarierte Attributwert verfügbar. Wenn der deklarierte Attributwert auf false gesetzt ist, lautet der Code wie folgt:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:class="{prop1:isTrue,prop2:isActive}" class="spancss1">{{text}}</span>
  </div>
</template>

<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        isTrue: false,
        isActive: true,
        text: "对象语法1"
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Nach dem Login kopieren

Methode 2 deklariert den Objektnamen direkt in der Vorlage, deklariert die Attribute prop1 und prop2 in Javascript und gibt aus, ob sie verfügbar sind. Wenn der deklarierte Attributwert auf true gesetzt ist, ist der deklarierte Attributwert verfügbar auf false setzen und dann erklären, dass der Attributwert nicht verfügbar ist. Der Code lautet wie folgt:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:class="obj" class="spancss1">{{text}}</span>
  </div>
</template>

<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        obj: {
          prop1: true,
          prop2: false
        },
        text: "对象语法2"
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Nach dem Login kopieren

3.3.2 Array-Syntax Die

-Methode deklariert immer das Array Name direkt in der Vorlage, Ausgabe der erforderlichen Array-Elemente in Javascript. Der Beispielcode lautet wie folgt:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:class="arr" class="spancss1">{{text}}</span>
  </div>
</template>

<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        arr: [&#39;prop1&#39;,&#39;prop2&#39;,&#39;prop3&#39;],
        text: "数组语法1"
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Nach dem Login kopieren

Methode 2: Deklarieren Sie das Array in der Vorlage und definieren Sie seine Elemente , und geben Sie das Array-Definitionselement in Javascript aus, um zu sehen, ob es verfügbar ist. Wenn Sie dieses Array-Element verwenden müssen, definieren Sie es in Javascript, um den Attributwert des entsprechenden Array-Elements auszugeben , setzen Sie den Attributwert dieses Array-Elements auf false. Der Beispielcode lautet wie folgt: Analyse der 4-v-bind-Anweisung (mit Code)

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:class="[prop1,prop2,prop3]" class="spancss1">{{text}}</span>
  </div>
</template>
<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        prop1: &#39;prop1&#39;,
        prop2: false,
        prop3: &#39;prop3&#39;,
        text: "数组语法2"
      }
    }
  }
</script>
<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Nach dem Login kopieren

Methode 3 wechselt die gebundene Klasse in der Liste basierend auf Bedingungen und deklariert die Array und bedingter Ausdruck in der Vorlage und gibt den Wert des bedingten Ausdrucks des Array-Elements in JavaScript aus. Der Beispielcode lautet wie folgt:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:class="[prop1?&#39;prop1&#39;:&#39;&#39;,prop2,prop3?&#39;prop3&#39;:&#39;&#39;,prop4?&#39;prop4&#39;:&#39;prop5&#39;,prop6?&#39;prop6&#39;:&#39;prop5&#39;]" class="spancss1">{{text}}</span>
  </div>
</template>
<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        prop1: false,
        prop2: &#39;prop2&#39;,
        prop3: true,
        prop4: true,
        prop6: false,
        text: "数组语法3"
      }
    }
  }
</script>
<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Nach dem Login kopieren

3.4 Inline-Stil binden

3.4.1 Objektsyntax, Attribute in Vorlage deklarieren, entsprechende Attributwerte in Javascript ausgeben, Beispielcode Wie folgt:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:style="{background:color1,fontSize:fontSize+&#39;px&#39;}" class="spancss1">{{text}}</span>
  </div>
</template>

<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        color1: &#39;green&#39;,
        fontSize: 25,
        text: "绑定内联样式1"
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Nach dem Login kopieren

3.4.2 Array-Syntax, Sie können mehrere Stilobjekte auf dasselbe Element anwenden

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:style="[prop1,prop2]" class="spancss1">{{text}}</span>
  </div>
</template>

<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        prop1: {
          background:&#39;green&#39;
        },
        prop2: {
          fontSize: &#39;25px&#39;,
          fontWeight: &#39;bolder&#39;
        },
        text: "绑定内联样式1"
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Nach dem Login kopieren

3.4.3 Wenn v-bind:style CSS-Eigenschaften verwendet die das Hinzufügen eines Browser-Engine-Präfixes erfordern, wie z. B. transform, erkennt Vue.js automatisch das entsprechende Präfix und fügt es hinzu.

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:style="[prop1,prop2]" class="spancss1">{{text}}</span>
  </div>
</template>
<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        prop1: {
          background:&#39;green&#39;
        },
        prop2: {
          fontSize: &#39;25px&#39;,
          transform: &#39;rotate(7deg)&#39;
        },
        text: "绑定内联样式1"
      }
    }
  }
</script>
<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Nach dem Login kopieren

3.4.4 Mehrfachwertbindung: Ab 2.3.0 können Sie in der Stilbindung ein Array mit mehreren Werten für das Attribut bereitstellen, was häufig verwendet wird Geben Sie mehrere Präfixwerte an. Wenn der Browser Flexbox ohne Browser-Präfix unterstützt, wird nur Folgendes angezeigt: flex

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:style="{ display: [&#39;-webkit-box&#39;, &#39;-ms-flexbox&#39;, &#39;flex&#39;] }" class="spancss1">{{text}}</span>
  </div>
</template>
<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        text: "绑定内联样式4"
      }
    }
  }
</script>
<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Nach dem Login kopieren

Zusammenfassung: v-bind bindet dynamisch ein oder mehrere Features oder eine Komponenten-Requisite an einen Ausdruck, der problemlos DOM rendern kann

Verwandte Empfehlungen:

Der anfängliche Konstruktionsprozess des Projekts in Vue (Bild und Text)
Analyse der Verzeichnisstruktur nach dem Erstellen des Projekts mit Vue-cli (Bild und Text)

Das obige ist der detaillierte Inhalt vonAnalyse der 4-v-bind-Anweisung (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!