P7属性绑定

2023-07-27 11:00:14
微图
441
最后编辑:微图 于 2024-03-26 14:26:39
分享链接
摘要: v-bind:class动态绑定属性

打开终端

删地只剩script和template

不用输入尖括号,直接输标签,弹出待选标签



 v-bind:class="msg"
<template>
  <div v-bind:class="msg">测试</div>
</template>

<script>
  export default {
    data()  {
      return{
        msg:"active"
      }

    }
  }
</script>


加id


<template>
  <div v-bind:id="dynamicId" v-bind:class="msg">测试</div>
</template>

<script>
  export default {
    data()  {
      return{
        msg:"active",
        dynamicId:"appID"
      }

    }
  }
</script>


简写:

1次绑定多属性


        objectofAttrs: {
          class:"1次绑定多appclss",
          id:"1次邦多appid"
        }



<template>
  <div v-bind:id="dynamicId" v-bind:class="msg">测试</div>
  <div v-bind="objectofAttrs">测试</div>
</template>

<script>
  export default {
    data()  {
      return{
        msg:"active",
        dynamicId:"appID",
        objectofAttrs: {
          class:"1次绑定多appclss",
          id:"1次邦多appid"
        }
      }

    }
  }

</script>


按钮是否可用


        isButtonDisable:true
<template>
  <div v-bind:id="dynamicId" v-bind:class="msg">测试</div>
  <div v-bind="objectofAttrs">测试</div>
  <button :disabled="isButtonDisable">按钮可用?</button>
</template>

<script>
  export default {
    data()  {
      return{
        msg:"active",
        dynamicId:"appID",
        objectofAttrs: {
          class:"1次绑定多appclss",
          id:"1次邦多appid"
        },
        isButtonDisable:true
      }

    }
  }
</script>


发表评论
评论通过审核后显示。
  • 在线客服
  • 关注微信
    • 客服帆帆
    • 客服娜娜
    • 客服美美
    • 客服龙龙
  • 扫一扫关注微信