uni-app nvue 不能动态修改class Name

发布于 1周前 作者 caililin 来自 Uni-App

uni-app nvue 不能动态修改class Name

开发环境 版本号 项目创建方式
Mac 12.7.5 HBuilderX

示例代码：

<view :class="{'active': tabType!=1}" @click="changeTab(0)">
    <text class="title">{{'修改登录密码'+tabType}}</text>
</view>
<view :class="{'active': tabType==1}" @click="changeTab(1)">
    <text v-else class="title">{{'设置支付密码'+tabType}}</text>
</view>  

const tabType = ref(0)

const changeTab = (type)=>{
    tabType.value = type
}

操作步骤：

<view :class="{'active': tabType!=1}" @click="changeTab(0)">
    <text class="title">{{'修改登录密码'+tabType}}</text>
</view>
<view :class="{'active': tabType==1}" @click="changeTab(1)">
    <text v-else class="title">{{'设置支付密码'+tabType}}</text>
</view>  

const changeTab = (type)=>{
    tabType.value = type
}

预期结果：

  • 可以正常切换class

实际结果：

  • 结果class 不能如期

bug描述：

  • 更加Tab 点击选择，切换不同状态，结果状态值变了，class毫无变化，

Harmonyos Next教程
3 回复

nvue在绑定class时，只支持数组语法


感谢，已经解决

在 uni-app 中使用 nvue 页面时，由于 nvue 是基于 Weex 引擎渲染的，其 DOM 操作与常规的 Vue 页面有所不同，因此在 nvue 中直接动态修改 className 并不像 Vue 页面那样方便。不过，我们可以通过绑定样式类或者利用条件渲染来实现类似的功能。

以下是一个如何在 nvue 中通过数据绑定动态修改样式的示例：

示例代码

1. 数据准备与模板绑定

首先，在你的 nvue 页面中定义一个数据对象，其中包含用于控制样式的属性。然后，在模板中使用这些属性来动态绑定样式类。

<template>
  <div>
    <button @click="toggleClass">切换样式</button>
    <div :class="{'active-class': isActive}">
      这是一个可以动态修改样式的 div
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    toggleClass() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style>
.active-class {
  color: red;
  font-weight: bold;
}
</style>

2. 条件渲染实现样式切换

另一种方法是使用条件渲染来切换整个组件或元素，从而实现样式的动态修改。虽然这种方法不如直接修改 className 灵活，但在某些场景下也是有效的。

<template>
  <div>
    <button @click="toggleClass">切换样式</button>
    <div v-if="isActive" class="active-class">
      样式激活时显示的 div
    </div>
    <div v-else class="inactive-class">
      样式未激活时显示的 div
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    toggleClass() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style>
.active-class {
  color: green;
  background-color: lightgray;
}

.inactive-class {
  color: black;
  background-color: white;
}
</style>

通过上述方法，你可以在 nvue 页面中实现类似于动态修改 className 的效果。虽然 nvue 的 DOM 操作受限，但通过数据绑定和条件渲染，我们仍然可以灵活地控制页面的样式。

回到顶部