在vue中加属性，有两种方式：
方法一：通过直接在data中定义属性
我们可以在Vue的data中定义对应的属性，在Vue实例中使用。
例如，我们现在要在Vue实例中添加一个属性，可以这样写：
<div>
<p>{{message}}</p>
<button>添加属性</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> <button>按钮</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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
