Zusammenfassung der nativen Anweisungen in Vue.js (Code)

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: '#id',
    template: `<p v-text="&#39;value:&#39;+val"></p>`,
    data: {
        val: &#39;123&#39;
    }
})// 等同于 ： template: `<p>value:{{val}}</p>`

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: '#id',
    template: `<p v-html="val"></p>`,
    data: {
        val: &#39;<span>123</span>&#39;
    }
})

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: '#id',
    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>})

4, v-for

Schleife über ein Array (oder Objekt)

new Vue({
    el: '#id',
    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;
    }
   }
})

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中的方法

5, v-Modell

Zwei-Wege-Bindungsdaten

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

6, v-once

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

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

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!