css：如何通过不同的值，改变盒子的样式和字体颜色通过computed而不是v-if-Toy模板网

这篇具有很好参考价值的文章主要介绍了css：如何通过不同的值，改变盒子的样式和字体颜色通过computed而不是v-if。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在使用uniapp编写功能时，可以通过computed方法来实现根据num这个值也可以是后端传过来的值只要是number类型都可以。不同取值来修改盒子的背景颜色和字体颜色。首先，在data中定义一个num来存储当前的值，然后在computed中创建一个样式对象，并根据num的取值来设置相应的背景颜色和字体颜色。

<template>
  <view>
    <view class="box" :style="boxStyle">{{ num }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      num: 1 // 默认值为1
    };
  },
  computed: {
    boxStyle() {
      let backgroundColor = "";
      let color = "";
      
      // 根据num的取值来设置样式
      switch (this.num) {
        case 1:
          backgroundColor = "red";
          color = "lightcoral";
          break;
        case 2:
          backgroundColor = "blue";
          color = "lightblue";
          break;
        case 3:
          backgroundColor = "green";
          color = "lightgreen";
          break;
        default:
          break;
      }
      
      // 返回样式对象
      return {
        backgroundColor,
        color
      };
    }
  }
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
</style>

我们在template中设置了一个名为box的view来作为盒子容器，通过:style绑定boxStyle来设置盒子的样式。在computed中，我们创建了一个boxStyle方法，根据num的不同取值来设置backgroundColor和color的值，并将它们作为样式对象返回。最后，在style中设置box的样式，如宽度、高度、居中等。

这样，当num的值改变时，盒子的背景颜色和字体颜色就会随之变化。就不需要使用v-if设置多个盒子和多个样式。文章来源地址https://www.toymoban.com/news/detail-717410.html

到了这里，关于css：如何通过不同的值，改变盒子的样式和字体颜色通过computed而不是v-if的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！