Cara menambah atribut pada vue (dua kaedah)

Terdapat dua cara untuk menambah atribut dalam Vue:

Kaedah 1: Dengan mentakrifkan atribut secara langsung dalam data

Kami boleh menentukan atribut yang sepadan dalam data Vue yang digunakan dalam contoh.

Sebagai contoh, jika kita kini ingin menambah harta pada contoh Vue, kita boleh menulisnya seperti ini:

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

Dalam kod di atas, kita mentakrifkan Vue aplikasi instance, dalam data Terdapat dua atribut, mesej dan attr Nilai awal mesej ialah "Hello World!" Dalam kaedah setAttr, kami menggunakan $set untuk menambah nilai atribut attr dan menggantikan atribut attr dalam data dengan "Saya adalah atribut yang baru ditambah".

Kaedah 2: Tentukan arahan global dan tempatan melalui Vue.directive

Vue.directive ialah kaedah global dalam Vue yang digunakan untuk menyesuaikan arahan yang boleh mentakrifkan arahan global dalam contoh Vue operasi pada DOM.

Andaikan kita kini perlu menambah atribut yang dilumpuhkan pada butang, kita boleh menulis seperti ini:

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

Dalam kod di atas, kami menggunakan kaedah Vue.directive untuk tentukan arahan Global custome-attr dan tambahkan arahan ini dalam butang.

Dalam fungsi arahan, kami menggunakan kaedah setAttribute untuk menambah atribut yang dilumpuhkan pada elemen butang untuk mencapai kesan melumpuhkan butang.

Ringkasan:

Melalui dua kaedah di atas, kami boleh menambah sifat dalam Vue dengan mudah. Kaedah 1: Apabila menambah atribut pada contoh, anda boleh terus menggunakan $set untuk menambah atau mengubah suai atribut dalam data. Kaedah 2 menggunakan kaedah Vue.directive untuk mentakrifkan arahan global dan menambah arahan yang sepadan kepada elemen untuk mengendalikan DOM.

Atas ialah kandungan terperinci Cara menambah atribut pada vue (dua kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!