vue怎么加属性（两种方法）-前端问答-PHP中文网

vue怎么加属性（两种方法）

PHPz

发布： 2023-04-09 08:30:02

原创

4521人浏览过

在vue中加属性，有两种方式：

方法一：通过直接在data中定义属性

我们可以在Vue的data中定义对应的属性，在Vue实例中使用。

例如，我们现在要在Vue实例中添加一个属性，可以这样写：

<div id="app">
  <p>{{message}}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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中文网其它相关文章！