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

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

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

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

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

<div>
  <p>{{message}}</p>
  <button>添加属性</button>
</div>

<script>
  let app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;Hello World!&#39;,
      attr: &#39;我是新添加的属性&#39;
    },
    methods: {
      setAttr() {
        this.$set(this, &#39;attr&#39;, &#39;我是新添加的属性&#39;);
      }
    }
  });
</script>

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

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

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

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

<div>
  <button>按钮</button>
</div>

<script>
  Vue.directive(&#39;custome-attr&#39;, function(el, binding) {
    el.setAttribute(&#39;disabled&#39;, true);
  });

  let app = new Vue({
    el: &#39;#app&#39;
  });
</script>

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

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

요약:

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

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