在vue中加属性,有两种方式:
方法一:通过直接在data中定义属性
我们可以在Vue的data中定义对应的属性,在Vue实例中使用。
例如,我们现在要在Vue实例中添加一个属性,可以这样写:
{{message}}
立即学习“前端免费学习笔记(深入)”;
上面的代码中,我们定义了一个Vue实例app,data中有两个属性message和attr,message初始值为"Hello World!",attr初始值为"我是新添加的属性"。在方法setAttr中,我们使用$set来添加attr属性的值,并将data中的attr属性替换为"我是新添加的属性"。
方法二:通过Vue.directive来定义全局局部指令
Vue.directive是Vue中用来自定义指令的一个全局方法,它可以在Vue实例中定义一个全局指令,实现对DOM的操作。
假设我们现在需要给一个按钮添加一个禁用的属性,我们可以这样写:
上面的代码中,我们使用Vue.directive方法定义了一个全局指令custome-attr,并在按钮中添加该指令。
在指令函数中,我们使用setAttribute方法将disabled属性添加到了按钮元素中,达到了禁用按钮的效果。
总结:
通过上述两种方式,我们可以在Vue中轻松地添加属性。方法一在实例中添加属性时,可以直接使用$set来对data中的属性进行添加或修改。方法二通过Vue.directive方法定义全局指令,在元素中添加对应的指令,实现对DOM的操作。










