开发者社区> 问答> 正文

Class 与 Style 如何动态绑定?

已解决

Class 与 Style 如何动态绑定?

展开
收起
pandacats 2019-12-10 10:58:17 675 0
1 条回答
写回答
取消 提交回答
  • 采纳回答

    Class 可以通过对象语法和数组语法进行动态绑定:

    对象语法:

    <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
    
    data: {
    
      isActive: true,
    
      hasError: false
    
    }
    

    数组语法:

    <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
    
    data: {
    
      activeClass: 'active',
    
      errorClass: 'text-danger'
    
    }
    

    Style 也可以通过对象语法和数组语法进行动态绑定:

    对象语法:

    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    
    data: {
    
      activeColor: 'red',
    
      fontSize: 30
    
    }
    

    数组语法:

    <div v-bind:style="[styleColor, styleSize]"></div>
    
    data: {
    
      styleColor: {
    
         color: 'red'
    
       },
    
      styleSize:{
    
         fontSize:'23px'
    
      }
    
    }
    
    2019-12-10 11:01:09
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载