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

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 06:16
    关注

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

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

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 DBIF_REPO_SQL_ERROR
  • ¥15 根据历年月数据,用Stata预测未来六个月汇率
  • ¥15 DevEco studio开发工具 真机联调找不到手机设备
  • ¥15 请教前后端分离的问题
  • ¥100 冷钱包突然失效,急寻解决方案
  • ¥15 下载honeyd时报错 configure: error: you need to instal a more recent version of libdnet
  • ¥15 距离软磁铁一定距离的磁感应强度大小怎么求
  • ¥15 霍尔传感器hmc5883l的xyz轴输出和该点的磁感应强度大小的关系是什么
  • ¥15 vscode开发micropython,import模块出现异常
  • ¥20 Excel数据自动录入表单并提交