uniapp :class不支持 `result-mask ${resultMask.class}` 语法
时间: 2024-10-15 08:19:31 浏览: 28
`uniapp` 是一款基于 Vue.js 的框架,用于构建跨平台的应用,它在样式绑定方面遵循的是 Vue 的数据绑定原则,而不是原生 HTML 中 CSS 类选择器的方式。在 Vue 中,当你想要动态地应用一个 CSS 类名,通常会使用 v-bind:class 或者简写 .sync 版本:
```html
<view class="result-mask" :class="{ active: resultMask }"></view>
```
在这个例子中,`result-mask` 是基础类名,`:class="{ active: resultMask }"` 部分则是表达式,当 `resultMask` 的值为真(非空、非 falsy)时,`.active` 类会被添加。
如果你尝试使用 `${resultMask.class}` 这种语法,Vue 并不会直接识别并解析,因为这不是 Vue 官方推荐的写法。如果你想在 `resultMask` 变化时改变类名,应该将 `.class` 属性视为一个变量,并确保它是可用的数据类型。如果 `resultMask` 是一个字符串并且包含合法的类名,你可以这样做:
```html
<view :class="{'result-mask ' + resultMask}: resultMask !== ''"></view>
```
这将给元素添加 `result-mask` 类,如果 `resultMask` 不为空字符串的话。
阅读全文