vueに属性を追加する方法(2つの方法)

Vue に属性を追加するには 2 つの方法があります:

方法 1: データに属性を直接定義する方法

例で使用されている Vue では、Vue のデータに対応する属性を定義できます。

たとえば、Vue インスタンスにプロパティを追加したい場合は、次のように記述できます:

<div id="app">
  <p>{{message}}</p>
  <button @click="setAttr">添加属性</button>
</div>

<script>
  let app = new Vue({
    el: '#app',
    data: {
      message: 'Hello World!',
      attr: '我是新添加的属性'
    },
    methods: {
      setAttr() {
        this.$set(this, 'attr', '我是新添加的属性');
      }
    }
  });
</script>

上記のコードでは、Vue インスタンス アプリを定義しました。データには message と attr の 2 つの属性があり、message の初期値は「Hello World!」、attr の初期値は「私は新しく追加された属性です」です。 setAttr メソッドでは、$set を使用して attr 属性の値を追加し、データ内の attr 属性を「新しく追加された属性です」に置き換えます。

方法 2: Vue.directive を使用してグローバル命令とローカル命令を定義する

Vue.directive は、命令をカスタマイズするために使用される Vue のグローバル メソッドです。Vue インスタンスでグローバル命令を定義できます。 DOM 上の操作。

disabled 属性をボタンに追加する必要があるとします。次のように記述できます:

<div id="app">
  <button v-custome-attr>按钮</button>
</div>

<script>
  Vue.directive('custome-attr', function(el, binding) {
    el.setAttribute('disabled', true);
  });

  let app = new Vue({
    el: '#app'
  });
</script>

上記のコードでは、Vue.directive メソッドを使用してグローバル ディレクティブを定義します。 -attr を指定し、このディレクティブをボタンに追加します。

コマンド関数では、setAttribute メソッドを使用して、disabled 属性をボタン要素に追加し、ボタンを無効にする効果を実現します。

概要:

上記の 2 つの方法により、Vue にプロパティを簡単に追加できます。方法 1: インスタンスに属性を追加する場合、$set を直接使用してデータの属性を追加または変更できます。方法 2 では、Vue.directive メソッドを使用してグローバル命令を定義し、対応する命令を要素に追加して DOM を操作します。

以上がvueに属性を追加する方法(2つの方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。