<view class="scan">
<div :class="[currentClass]">
<text class="label">我来了 </text>
</div>
<button @click="jump">跳转</button>
</view>
</template>
<script setup lang="ts">
import { ref} from 'vue'
const currentClass = ref('item')
function jump(){
currentClass.value = currentClass.value === 'item'?'a':'item'
console.log(currentClass.value)
}
</script>
<style lang="scss">
.scan{
flex: 1;
display: flex;
flex-direction: column;
background: red;
}
.item{
.label{
color: #4cd964;
}
}
.a{
.label{
color: #fff;
}
}
</style>
1***@qq.com
- 发布：2024-06-27 14:15
- 更新：2024-09-13 08:54
- 阅读：282
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win11
HBuilderX类型： 正式
HBuilderX版本号： 4.15
手机系统： Android
手机系统版本号： Android 13
手机厂商： 小米
手机机型： Redmi Note 12 Pro+
页面类型： nvue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
我在点击按钮切换currentClass的值时 子级的label字体的颜色不会发生变化
我在点击按钮切换currentClass的值时 子级的label字体的颜色不会发生变化
预期结果：
我在点击按钮切换currentClass的值时 当currentClass为 item 我来了字体颜色应为#4cd964 当currentClass为a时 我来了字体应为白色
我在点击按钮切换currentClass的值时 当currentClass为 item 我来了字体颜色应为#4cd964 当currentClass为a时 我来了字体应为白色
实际结果：
我在点击按钮切换currentClass的值时 子级的label字体的颜色不会发生变化
我在点击按钮切换currentClass的值时 子级的label字体的颜色不会发生变化
bug描述：
我在nvue界面动态修改class，子级的class绑定的样式不会生效
nvue 为啥你可以动态修改 class ？我怎么搞都不能动态修改，值变了，但class一动不动，4.24版本，快要把我干崩溃了
<view class="'active': tabType!=1" @click="changeTab(0)"><text class="title">修改登录密码</text></view>
<view class="'active': tabType==1" @click="changeTab(1)"><text class="title">修改支付密码</text></view>
const tabType = ref(0)
const changeTab = (type)=>{
tabType.value = type
}
即使用computed() 也不行。
1***@qq.com (作者)
好的 我试试
2024-06-27 15:48
1***@qq.com (作者)
css写法也不可以呀
2024-06-27 16:47
7***@qq.com
回复 1***@qq.com: ```javascript
<template>
<view class="scan">
<view :class="[currentClass]">
<text :class="[currentClass1]">我来了 </text>
</view>
<button @click="jump">跳转</button>
</view>
</template>
<script setup lang="ts">
import { ref} from 'vue'
const currentClass = ref('item')
const currentClass1 = ref('label1')
function jump(){
currentClass.value = currentClass.value === 'item'?'a':'item'
currentClass1.value = currentClass.value === 'item'?'label1':'label2'
console.log(currentClass.value)
}
</script>
<style lang="css">
.scan{
flex: 1;
display: flex;
flex-direction: column;
background: red;
}
.item{
}
.label1{
color: #4cd964;
}
.a{
}
.label2{
color: #fff;
}
</style>
2024-06-28 08:19