Vue.js のネイティブ ディレクティブの概要 (コード)

この記事では、Vue.js のネイティブ命令の概要 (コード) を紹介します。必要な方は参考にしていただければ幸いです。

ディレクトリ:

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

1、v-text

tag Bind表示する必要があるコンテンツ

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

2、v-html

バインドされた値が文字列ではなくHTML値として表示される場合(innerTextをinnerHtmlに変換するのと同様)

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

3、v-showおよびv -if

は、ノードが表示されるかどうかを決定するブール変数を受け取ります。

違い:
v-show: ノードに display:none を追加します。
v-if: ノードが存在するかどうかを判断します。 false の場合、ノードは存在しないため、DOM ノードが再描画されます

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

配列 (またはオブジェクト) のループ

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 と v-on

v-bind: 一方向バインディング データ

v-on: バインディング イベント

// 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.モデル

双方向バインディング データ

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

6、v-once

は 1 回のみバインドされ、バインドされたデータが変更されても、ノード上のデータは再度変更されません

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

関連する推奨事項:

Angular が使用されます。要素を制御するための表示または非表示に関するネイティブ命令の紹介_AngularJS の使用

Vue 命令

以上がVue.js のネイティブ ディレクティブの概要 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。