Zusammenfassung der nativen Anweisungen in Vue.js (Code)-js-Tutorial-php.cn

Zusammenfassung der nativen Anweisungen in Vue.js (Code)

不言

Freigeben： 2018-09-07 17:19:12

Original

1762 Leute haben es durchsucht

Der Inhalt dieses Artikels ist eine Zusammenfassung (Code) der nativen Anweisungen in Vue.js. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Verzeichnis:

v-text v-html v-show/v-if v-for v-bind/v-on v-model v -once

1. v-text

bindet den anzuzeigenden Inhalt an das Label

new Vue({
    el: &#39;#id&#39;,
    template: `<p v-text="&#39;value:&#39;+val"></p>`,
    data: {
        val: &#39;123&#39;
    }
})// 等同于 ： template: `<p>value:{{val}}</p>`

Nach dem Login kopieren

v-html

wann Bindung Ein bestimmter Wert wird als HTML-Wert anstelle einer Zeichenfolge angezeigt (ähnlich wie bei der Konvertierung von innerText in innerHtml).

new Vue({    el: &#39;#id&#39;,
    template: `<p v-html="val"></p>`,
    data: {
        val: &#39;<span>123</span>&#39;
    }
})

Nach dem Login kopieren

3. Erhalten Sie eine boolesche Variable und beurteilen Sie sie Ob der Knoten angezeigt wird.

Unterschied:

v-show: Fügen Sie dem Knoten eine Anzeige hinzu: keine.
v-if: Bestimmen Sie, ob der Knoten vorhanden ist. Wenn „false“, ist der Knoten nicht vorhanden, was dazu führt, dass der DOM-Knoten vorhanden ist neu gezeichnet

new Vue({
    el: &#39;#id&#39;,
    template:
     `<p>
         <span v-show="active"></span>
         <span v-if="active"></span>
    </p>`,
    data: {
        active: false,
        text: 0 
    }
    //  <span v-if="active"></span>
    //  <span v-else-if="text === 0"></span>
    //  <span v-if="active"></span>})

Nach dem Login kopieren

4, v-for

Schleife über ein Array (oder Objekt)

new Vue({
    el: &#39;#id&#39;,
    template: 
    `<p>
            <ul>
                // 遍历数组                
                <li v-for="(item,index) in arr" :key="item">{{item}}</li>
            </ul>
            <ul>
                // 遍历对象                
                <li v-for="(val,key,index) in obj1" :key="key">{{key}} : {{val}}</li>
            </ul>
     </p>`,
    data: {
        arr: [1, 2, 3],
        obj1: {
            a: &#39;123&#39;,
            b: &#39;456&#39;
            c: &#39;789&#39;
    }
   }
})

Nach dem Login kopieren

4, v-bind und v-on

v -bind: Einzelne Bindungsdaten

v-on: Bindungsereignis

// v-bind<p v-bind:class="val"></p>// 简写方式:<p :class="val"></p>// 其中val是data中的数据

// v-on<p v-on:click="clickButh"></p>// 简写方式:<p @click="clickButh"></p>// 其中clickButn是methods中的方法

Nach dem Login kopieren

5, v-Modell

Zwei-Wege-Bindungsdaten

new Vue({
    el: &#39;#id&#39;,
    template: 
    `<p>
        <input type="text" v-model="val">
    </p>`,
    data: {        val: &#39;111&#39;
    }
})

Nach dem Login kopieren

6, v-once

Nur einmal binden, wenn sich die gebundenen Daten ändern, ändern sich die Daten auf dem Knoten nicht mehr

new Vue({
    el: &#39;#id&#39;,
    template: 
    `<p v-once >Text: {{val}}</p>`,
    data: {
        val: &#39;111&#39;
    }
})

Nach dem Login kopieren

Verwandte Empfehlungen:

Angular wird zur Steuerung von Elementen verwendet Einführung in native Anweisungen zum Anzeigen oder Nicht-Anzeigen_AngularJS

Verwendung von Vue-Anweisungen

Das obige ist der detaillierte Inhalt vonZusammenfassung der nativen Anweisungen in Vue.js (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!