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);
}
vue3 v-bind传参给style scss中的变量,请教?
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- 神影天初 2022-05-29 14:16关注
if else 这是 sass 的规则,只会在加载编译成 css 的时候执行一次,不是响应式的。vue常见做法是定义两个 class,然后在 template 中或者 script 中根据 itemChildLength 来切换 class。
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥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:门禁系统设计