Vue에서 사용자 정의 속성을 얻는 방법

Vue에서는 v-bind 지시문을 통해 사용자 정의 속성을 요소에 바인딩한 다음 JavaScript를 통해 이러한 사용자 정의 속성을 얻을 수 있습니다. 사용자 정의 속성을 얻는 방법을 단계별로 알아봅시다.

1. 사용자 정의 속성을 요소에 바인딩

v-bind 명령을 사용하면 v-bind:attribute name="expression" 또는 축약형: attribute name ="expression" 형식으로 속성을 요소에 동적으로 바인딩할 수 있습니다. .

다음과 같이 사용자 정의 속성 data-id를 요소에 바인딩할 수 있습니다.

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

여기서 userId는 구성 요소의 데이터에 정의된 변수입니다.

2. 사용자 정의 속성 가져오기

JavaScript를 통해 이 사용자 정의 속성을 얻을 수 있습니다. Vue에서는 Mounted() 라이프사이클 동안 요소의 사용자 정의 속성을 얻을 수 있습니다. Mounted() 라이프 사이클은 Vue 인스턴스가 DOM에 마운트된 후 트리거되는 Hook 함수입니다. 이때 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>

위 예에서는 사용자 정의 속성 data-를 p 요소에 바인딩했습니다. 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를 통해 이러한 사용자 정의 속성을 가져옵니다. 마지막으로 Vue의 기능을 확장해야 할 경우 이러한 속성을 사용할 수 있습니다.

위 내용은 Vue에서 사용자 정의 속성을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!