How to get custom attributes in vue

In Vue, we can bind custom attributes to elements through the v-bind directive, and then obtain these custom attributes through JavaScript. Let's learn step by step how to get custom attributes.

1. Bind custom attributes to elements

The v-bind directive allows us to dynamically bind attributes to elements in the form: v-bind: attribute name ="expression", or abbreviated as: attribute name="expression".

We can bind a custom attribute data-id to the element like this:

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

Among them, userId is a variable defined in the data of the component.

2. Get custom attributes

We can get this custom attribute through JavaScript. In Vue, we can get the custom attributes of the element during the mounted() life cycle. The mounted() life cycle is a hook function triggered after the Vue instance is mounted on the DOM. At this time, the DOM can be manipulated.

Suppose we have bound the data-id attribute to the p element in the previous component, then we can get the attribute like this:

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

In the above example, we bind the p element The custom attribute data-id is bound, and a reference named "User" is given to the p element through the ref attribute. In the mounted() function, we obtain the p element through this.$refs.user, and call the getAttribute('data-id') method on it to obtain the custom attribute. Finally, we print out the obtained value, and the result is 123456.

3. Using custom attributes

After obtaining the custom attributes, we can perform some corresponding operations. For example, when we click on the p element, the value of the element's custom attribute pops up:

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

The above is how to get the custom attribute in Vue. Bind custom properties through the v-bind directive, and then obtain these custom properties through JavaScript. Finally, you can use these properties in the need to extend the functionality of Vue.

The above is the detailed content of How to get custom attributes in vue. For more information, please follow other related articles on the PHP Chinese website!