vue中怎麼取到自訂屬性

在Vue中，我們可以透過v-bind指令來為元素綁定自訂屬性，然後再透過JavaScript來取得這些自訂屬性。下面我們就來一步步了解如何取到自訂屬性。

1. 給元素綁定自訂屬性

v-bind指令可以讓我們將屬性動態綁定到元素上，形式為：v-bind:屬性名="表達式"，或簡寫為:屬性名稱="表達式"。

我們可以這樣給元素綁定一個自訂屬性data-id：

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

其中，userId是該元件的data中定義的一個變數。

2. 取得自訂屬性

我們可以透過JavaScript來取得這個自訂屬性。在Vue中，我們可以在mounted()生命週期中取得到元素的自訂屬性。 mounted()生命週期是Vue實例掛載到DOM上後觸發的鉤子函數，此時可以操作DOM。

假設我們在前面的元件中給p元素綁定了data-id屬性，那麼我們可以這樣來取得該屬性：

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

在上面的範例中，我們給p元素綁定了自訂屬性data-id，並透過ref屬性為p元素取了一個引用名為"User"。在mounted()函數中，我們透過this.$refs.user取得到這個p元素，在它上面呼叫getAttribute('data-id')方法來取得自訂屬性。最後我們將得到的值列印出來，結果為123456。

3. 使用自訂屬性

取得到自訂屬性後，我們就可以進行一些對應的操作了。例如，當我們點擊p元素時，彈出該元素自訂屬性的值：

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

以上就是在Vue中取到自訂屬性的方法。透過v-bind指令綁定自訂屬性，然後透過JavaScript來取得這些自訂屬性。最後可以在need的地方使用這些屬性，擴充Vue的功能。

以上是vue中怎麼取到自訂屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！