在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中文網其他相關文章！
