vue3中通过对象来改变样式颜色

直接上案例代码，学过vue3的一看就懂：

<template><div :class="colorObj">颜色变化</div>
</template><script lang="ts">
// eslint-disable
import { defineComponent, reactive, toRefs, onMounted } from "vue";export default defineComponent({name: "App",setup() {const state = reactive({colorObj: {red: false,green: true,blue: false},status: 2});onMounted(() => {state.status = 1state.colorObj = {red: state.status == 0,green: state.status == 1,blue: state.status == 2};// eslint-disable});return {...toRefs(state)};}
});
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
.red {color: red;
}
.green {color: green;
}
.blue {color: blue;
}
</style>

vue3中通过对象来改变样式颜色相关推荐

vue 修改对象的值视图没有发生改变_在vue中处理对象属性改变视图不更新问题？ - echart...
...图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法,有一定的参考价值,感兴趣的朋友可以看看.以饼状图 ...
微信小程序中多个button/view组件中进行切换时改变样式
在小程序项目中遇到一个问题:数据分成四五个小组,然后要进行小组切换,切换的同时把button的样式也要改变,以前Dom操作的时候特别简单, 现在在小程序中竟不知从何下手,后面参照了这边博文:http: ...
vue3中对对象增添属性也会加入到响应式
我们先来看看看vue2版本: vue2版本中对一个对象增添属性不会有响应式,需要通过set方法来进行控制,比如一下点击点击岁数按钮时,岁数不会显示到页面中去. 再来看看vue3版本: 这时点击 ...
CSS鼠标滑过改变样式颜色
<style>div{width: 200px;height: 200px;float: right;background-color: red;}div:hover{width: 300 ...
java中String对象作为参数传递问题
问题 java中将对象作为参数传递究竟是值传递还是引用传递? 1.基本类型作为参数传递时,是传递值的拷贝,无论你怎么改变这个拷贝,原值是不会改变的. 2.对象作为参数传递时,是把对象在内存中的地址拷贝 ...
List 列表中的对象在循环中的声明问题
请看下面两段代码..MessageTopic对象建立的位置,直接导致了保存在List中MessageTopic对象的改变第一段代码 public static List<MessageTopi ...
技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效
#vue3-cli4.5项目技巧1 router-link导航鼠标切换样式 vue3中.router-link-exact-active失效 vue3exact-active-classs失效 vue ...
反转鼠标_新版 Win10 中改变鼠标颜色
在 Windows 10 中,传统控制面板里的 "鼠标" 设置面板中,有不少的鼠标指针方案被删除,只留下了默认和反色的鼠标指针方案,然而微软在新版本的 Windows 10 中带来 ...
MFC中改变按钮颜色的方法
本文参考学习 https://blog.csdn.net/zxccaoya/article/details/54142523 而来. 这里介绍mfc 中改变按钮颜色的最简单方法. 使用CMFCButt ...

vue3中通过对象来改变样式颜色

vue3中通过对象来改变样式颜色相关推荐

最新文章

热门文章