满口金牙 2022-05-27 17:45 采纳率: 91.1%
浏览 759
已结题

vue3 v-bind传参给style scss中的变量,请教?

 const itemChildLength = ref<string>('100px')

<style lang="scss" scoped>

$itemChild: v-bind(itemChildLength);     // 这里收不到??没用处 ,我要接收一个 js转过来的变量要怎么做 ?

li::before{
  @if  $itemChild == '100px' {  // $itemChild  好象收不到传过来的值,不会执行下去
//  @if  v-bind(itemChildLength) == '100px' 这样写也不行
    display: block;
    content: '';
    width: v-bind(itemChildLength);
    height: 26px;
    border-left: 1px solid rgb(58, 180, 90);
  } @else {
    display: none;
  }
}

li::before {

    display: block;
    content: '';
    width: v-bind(itemChildLength);  // 写在这里是又是有效的。
    height: 26px;
    border-bottom:1px solid rgb(0, 255, 21);
  } 



  • 写回答

2条回答 默认 最新

  • 神影天初 2022-05-29 14:16
    关注

    if else 这是 sass 的规则,只会在加载编译成 css 的时候执行一次,不是响应式的。vue常见做法是定义两个 class,然后在 template 中或者 script 中根据 itemChildLength 来切换 class。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 6月8日
  • 已采纳回答 5月31日
  • 创建了问题 5月27日

悬赏问题

  • ¥15 基于STM32心率血氧监测(OLED显示)相关代码运行成功后烧录成功OLED显示屏不显示的原因是什么
  • ¥100 X轴为分离变量(因子变量),如何控制X轴每个分类变量的长度。
  • ¥30 求给定范围的全体素数p的(p-2)的连乘积
  • ¥15 VFP如何使用阿里TTS实现文字转语音?
  • ¥100 需要跳转番茄畅听app的adb命令
  • ¥50 寻找一位有逆向游戏盾sdk 应用程序经验的技术
  • ¥15 请问有用MZmine处理 “Waters SYNAPT G2-Si QTOF质谱仪在MSE模式下采集的非靶向数据” 的分析教程吗
  • ¥15 adb push异常 adb: error: 1409-byte write failed: Invalid argument
  • ¥15 nginx反向代理获取ip,java获取真实ip
  • ¥15 eda:门禁系统设计