Résumé des directives natives dans Vue.js (code)

Le contenu de cet article est un résumé (code) des instructions natives de Vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Répertoire :

v-text v-html v-show/v-if v-for v-bind/v-on v-model v -une fois

1. v-text

Lier le contenu à afficher à l'étiquette

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

2. > Lorsque la valeur liée est affichée sous forme de valeur HTML plutôt que de chaîne (similaire à la conversion de innerText en innerHtml)

3. v-show et v-if

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

reçoivent un. variable booléenne pour déterminer si le nœud est affiché.

Différence :

v-show : Ajouter un display:none au nœud
v-if : Déterminer si le nœud existe. Si faux, le nœud n'existe pas, ce qui entraînera l'apparition du nœud DOM. redessiné

4. v-for

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

Boucle à travers le tableau (ou l'objet)

4.

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;
    }
   }
})

v -bind : données de liaison unidirectionnelle

v-on : événement de liaison

5, v-model

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

données de liaison bidirectionnelle

6. v-once

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

n'est lié qu'une seule fois. Lorsque les données liées changent, les données sur le nœud ne changeront plus

Recommandations associées :

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

Introduction aux instructions natives utilisées par Angular pour contrôler l'affichage des éléments_AngularJS

Utilisation des instructions Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!