UNIAPP 中 :style怎么为一个容器的多个属性由多个条件判断

在uni-app中，如果你想要为一个容器的样式设置多个属性，并基于不同的条件进行动态判断，你可以使用CSS的`@if`、`@elseif`和`@else`选择器，结合JavaScript表达式来实现逻辑控制。这通常在`.vue`文件的`<style>`标签内完成。这里是一个示例：

<template>
  <view v-if="isDesktop" class="container desktop-style">
    <!-- 电脑端样式 -->
    <text :class="{ bold: isBold }">文字加粗</text>
  </view>
  <view v-else class="container mobile-style">
    <!-- 手机端样式 -->
    <text :class="{ italic: isItalic }">文字斜体</text>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const isDesktop = ref(window.innerWidth > 768); // 判断是否为桌面设备
const isBold = ref(false); // 可能会根据某个条件变化的布尔值
const isItalic = ref(true); // 同上

// 当然，你也可以直接在样式里嵌套逻辑，不过这可能影响代码可读性
<style scoped>
.container {
  @if (isDesktop.value) {
    color: red;
  }
  @else if (!isBold.value && !isItalic.value) {
    color: blue;
  }
  @else {
    color: green;
  }
}
</style>
</script>

在这个例子中，`isDesktop`变量决定了是否应用`desktop-style`类，而`isBold`和`isItalic`则通过`:class`绑定到文本元素上，分别代表不同的字体样式。