vue 的属性绑定

最新推荐文章于 2025-03-21 14:57:26 发布

Манго нектар

最新推荐文章于 2025-03-21 14:57:26 发布

阅读量560

点赞数 11

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_74742670/article/details/142797414

版权

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令。

<template>
<div v-bind:class="boxClass" v-bind:id="boxId">
</div>
</template>

<script>
export default{
  data(){
    return{
      boxClass:"box1",
      boxId: "boxid1"
    }
  }
}
</script>

注意：v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicid 属性保持一致。如果绑定的值是 null 或者undefined ，那么该 attribute 将会从渲染的元素上移除。

由于v-bind比较常用所以可以简写，将v-bind省略只留下冒号。

<div :class="boxClass" :id="boxId"></div>

布尔型

布尔型 attribute 依据 true /false 值来决定 attribute 是否应该存在于该元素上,disabled 就是最常见的例子之一。

<template>
<div :class="boxClass" :id="boxId">
  <button :disabled="flag"></button>
</div>
</template>

<script>
export default{
  data(){
    return{
      boxClass:"box1",
      boxId: "boxid1",
      flag:true,
    }
  }
}
</script>

动态绑定多个值

如果需要绑定多个值可以使用js的对象来实现

<template>
<div v-bind="object"></div>
</template>

<script>
export default{
  data(){
    return{
      object:{
        boxClass:"box1",
        boxId:"boxid1"
      }
    }
  }
}
</script>