vue怎麼加屬性（兩種方法）

在Vue中加屬性，有兩種方式：

方法一：透過直接在data中定義屬性

我們可以在Vue的data中定義對應的屬性，在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實例app，data中有兩個屬性message和attr，message初始值為"Hello World!"，attr初始值為"我是新加入的屬性"。在方法setAttr中，我們使用$set來新增attr屬性的值，並將data中的attr屬性替換為"我是新新增的屬性"。

方法二：透過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方法將disabled屬性加入了按鈕元素中，達到了停用按鈕的效果。

總結：

透過上述兩種方式，我們可以在Vue中輕鬆地加入屬性。方法一在實例中加入屬性時，可以直接使用$set來對data中的屬性進行新增或修改。方法二透過Vue.directive方法定義全域指令，在元素中加入對應的指令，實現對DOM的操作。

以上是vue怎麼加屬性（兩種方法）的詳細內容。更多資訊請關注PHP中文網其他相關文章！