Bagaimana untuk mendapatkan atribut tersuai dalam vue

Dalam Vue, kami boleh mengikat atribut tersuai kepada elemen melalui arahan v-bind, dan kemudian mendapatkan atribut tersuai ini melalui JavaScript. Mari belajar langkah demi langkah cara mendapatkan atribut tersuai.

1. Ikat atribut tersuai kepada elemen

Arahan v-bind membolehkan kami mengikat atribut secara dinamik kepada elemen dalam bentuk: v-bind: attribute name ="expression" , atau disingkatkan sebagai: attribute name="expression".

Kami boleh mengikat id data atribut tersuai pada elemen seperti ini:

<template>
  <div>
    <p v-bind:data-id="userId">User ID</p>
  </div>
</template>

di mana userId ialah pembolehubah yang ditakrifkan dalam data komponen.

2. Dapatkan atribut tersuai

Kami boleh mendapatkan atribut tersuai ini melalui JavaScript. Dalam Vue, kita boleh mendapatkan atribut tersuai bagi elemen semasa kitaran hayat terpasang(). Kitaran hayat mounted() ialah fungsi cangkuk yang dicetuskan selepas tika Vue dipasang pada DOM Pada masa ini, DOM boleh dimanipulasi.

Andaikan kita telah mengikat atribut data-id kepada elemen p dalam komponen sebelumnya, maka kita boleh mendapatkan atribut seperti ini:

<template>
  <div>
    <p v-bind:data-id="userId" ref="user">User ID</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: '123456'
    }
  },
  mounted() {
    const userEle = this.$refs.user;  //获取p元素
    const userId = userEle.getAttribute('data-id');  //获取自定义属性
    console.log(userId);  //打印出123456
  }
}
</script>

Dalam contoh di atas, kita mengikat elemen p Id data atribut tersuai diikat dan nama rujukan "Pengguna" diberikan kepada elemen p melalui atribut ref. Dalam fungsi mounted(), kami memperoleh elemen p melalui ini.$refs.user, dan memanggil kaedah getAttribute('data-id') padanya untuk mendapatkan atribut tersuai. Akhirnya, kami mencetak nilai yang diperoleh, dan hasilnya ialah 123456.

3. Menggunakan atribut tersuai

Selepas mendapatkan atribut tersuai, kami boleh melakukan beberapa operasi yang sepadan. Contohnya, apabila kita mengklik pada elemen p, nilai atribut tersuai elemen muncul:

<template>
  <div>
    <p v-bind:data-id="userId" ref="user" @click="showId">User ID</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: '123456'
    }
  },
  methods: {
    showId() {
      const userEle = this.$refs.user;  //获取p元素
      const userId = userEle.getAttribute('data-id');  //获取自定义属性
      alert(userId);  //弹出该元素自定义属性的值
    }
  }
}
</script>

Di atas ialah cara mendapatkan atribut tersuai dalam Vue. Ikat sifat tersuai melalui arahan v-bind, dan kemudian dapatkan sifat tersuai ini melalui JavaScript. Akhir sekali, anda boleh menggunakan atribut ini dalam keperluan untuk melanjutkan fungsi Vue.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan atribut tersuai dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!