Vue 动态style

假设通过v-for循环在页面展示 select 下拉框,通过后端返回来的 configList字段来决定对应下拉框的显示与否,何解?

<el-select  :style="item.configList.length === 0 ? 'visibility: hidden;' : ''" v-for="(item, index) in selectList" :key="index" v-model="selected" placeholder="请选择">
  <el-option
    v-for="options in item.configList"
    :key="options.id"
    :label="options.configName"
    :value="options.id">
  </el-option>
</el-select>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue动态style是一种在Vue动态设置元素的样式属性的方法。可以通过绑定值、对象形式、数组形式、三目运算符形式、绑定计算属性、通过条件绑定样式以及多重值等方式来实现动态设置样式。\[1\]\[2\]\[3\]其中,绑定值可以直接在模板中使用三元表达式来设置样式属性的值,对象形式可以通过在data中定义样式对象来动态设置样式,数组形式可以通过将多个样式对象合并成一个数组来设置样式,三目运算符形式可以根据条件来选择不同的样式,绑定计算属性可以通过计算属性的返回值来设置样式,通过条件绑定样式可以根据条件来动态设置样式,多重值可以根据浏览器的支持情况选择不同的样式。这些方法都可以根据具体的需求来灵活地设置元素的样式属性。 #### 引用[.reference_title] - *1* *3* [Vue动态设置Style属性](https://blog.csdn.net/weixin_42120669/article/details/120572179)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue动态绑定style样式之动态添加style样式的多种写法](https://blog.csdn.net/weixin_43743175/article/details/125274617)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大杯美式不加糖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值