css:如何通过不同的值,改变盒子的样式和字体颜色通过computed而不是v-if

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





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

这样,当num的值改变时,盒子的背景颜色和字体颜色就会随之变化。就不需要使用v-if设置多个盒子和多个样式。

你可能感兴趣的:(css,css,前端)