vue 动态渲染style

最新推荐文章于 2025-10-05 00:20:52 发布

原创最新推荐文章于 2025-10-05 00:20:52 发布 · 681 阅读

0 ·

CC 4.0 BY-SA版权

前端日常专栏收录该内容

65 篇文章

订阅专栏

本文介绍了一种在Vue.js中使用`:style`绑定动态样式的具体实现方式，并通过两个实例展示了如何根据变量状态改变元素的背景颜色及调整输入框宽度和文字颜色。

:style="getMembertemporaryStatus(status)"


方法：
    getMembertemporaryStatus(status) { 
      if (status) {
        return 'background:#f5ccff'
      }
      return ''
    },

第二种：

文章：https://www.cnblogs.com/lpp-11-15/p/13163492.html

<el-input
      v-model="itemLabel.oldValue" class="borderNone"
      :style="{width:(label.flag == 'basePerson'?'40%':'100%'),color:'#8b8b8b'}"
      readonly
></el-input>