vue에 속성을 추가하는 방법(두 가지 방법)

Vue에 속성을 추가하는 방법에는 두 가지가 있습니다.

방법 1: 데이터에 직접 속성을 정의하여

Vue의 데이터에서 해당 속성을 정의하고 Vue 인스턴스에서 사용할 수 있습니다.

예를 들어 이제 Vue 인스턴스에 속성을 추가하려면 다음과 같이 작성할 수 있습니다.

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

위 코드에서는 Vue 인스턴스 앱을 정의합니다. 데이터에는 message와 attr이라는 두 가지 속성이 있습니다. 메시지의 초기값은 "Hello World!"이고, attr의 초기값은 "나는 새로 추가된 속성입니다"입니다. setAttr 메소드에서는 $set를 사용하여 attr 속성의 값을 추가하고 데이터의 attr 속성을 "나는 새로 추가된 속성입니다"로 바꿉니다.

방법 2: Vue.directive를 통해 전역 및 로컬 명령어 정의

Vue.directive는 명령어를 사용자 정의하는 데 사용되는 Vue의 전역 메서드로, Vue 인스턴스에서 DOM을 작동하는 전역 명령어를 정의할 수 있습니다.

이제 버튼에 비활성화된 속성을 추가해야 한다고 가정하면 다음과 같이 작성할 수 있습니다:

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

위 코드에서 Vue.directive 메서드를 사용하여 전역 지시어 custome-attr을 정의하고 이 지시어를 버튼.

명령 함수에서는 버튼을 비활성화하는 효과를 얻기 위해 setAttribute 메서드를 사용하여 버튼 요소에 비활성화된 속성을 추가합니다.

요약:

위의 두 가지 방법을 통해 Vue에 속성을 쉽게 추가할 수 있습니다. 방법 1: 인스턴스에 속성을 추가할 때 $set를 직접 사용하여 데이터의 속성을 추가하거나 수정할 수 있습니다. 방법 2는 Vue.directive 메서드를 사용하여 전역 명령을 정의하고 해당 명령을 요소에 추가하여 DOM을 작동합니다.

위 내용은 vue에 속성을 추가하는 방법(두 가지 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!