<template>
<view class="style" :class="[index == 1 ? ' on':'']" @click="click">
<text class="text">父级class改变时候， 我要改变颜色</text>
<text class="text">父级class改变时候， 我要改变颜色</text>
</view>
</template>
<script setup>
import {
ref
} from 'vue';
const index = ref(0)
const click = () => {
index.value = index.value == 1 ? 0 : 1
}
</script>
<style lang="scss">
.style {
background-color: #fff;
.text {
color: #000;
}
}
.on {
background-color: red;
.text {
color: #fff;
}
}
</style>
新新新
- 发布：2023-11-21 17:07
- 更新：2023-11-22 08:23
- 阅读：288
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10 专业版 22H2
HBuilderX类型： 正式
HBuilderX版本号： 3.96
手机系统： Android
手机系统版本号： Android 8.1
手机厂商： 华为
手机机型： BLN-AL40
页面类型： nvue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
复现步骤在代码示例
复现步骤在代码示例
预期结果：
改变父级样式、 同时改变子元素样式
改变父级样式、 同时改变子元素样式
实际结果：
改变了父级样式、 子元素样式没改变
改变了父级样式、 子元素样式没改变
bug描述：
改变父级class ，也想改变当前元素的样式、
但目前 只能改变父级样式、 子集样式不能改变
请问有什么解决方案么？
套马杆的套子 - 没有解决不了的问题，只有解决不完的问题
试试
<template>
<view :class="[index == 1 ? ' on':'style']" @click="click">
<text :key="key" class="text">父级class改变时候， 我要改变颜色</text>
<text class="text">父级class改变时候， 我要改变颜色</text>
</view>
</template>
<script setup>
import {
ref
} from 'vue';
const index = ref(0)
const key=ref(new Date().getTime())
const click = () => {
index.value = index.value == 1 ? 0 : 1
key.value=new Date().getTime()
}
</script>
新新新 (作者)
感谢 可以了
2023-11-22 14:20
新新新 (作者)
如果是循环出来的元素、 就会出现所有元素都刷新一遍的问题
2023-11-22 14:39
套马杆的套子
回复 新新新: 那肯定啊。。看你啥需求，要循环的话，就搞个动态的class或者style
2023-11-22 15:24