Vue3实现动态样式修改

Sunny_yaa

于 2023-11-19 22:28:28 发布

阅读量496

点赞数 2

文章标签： chrome javascript 前端 vue.js vue

本文链接：https://blog.csdn.net/Sunny_yaa/article/details/134496995

版权

Vue3实现动态样式修改

这里会有两个按钮且分别绑定appStyleObj 和 adFromStyleObj对象且绑定了点击时间seeData()

<a-button :style="appStyleObj" @click="seeData(1)">应用</a-button>
<a-button :style="adFromStyleObj" @click="seeData(2)">广告平台</a-button>

appStyleObj 和 adFromStyleObj对象


const appStyleObj=ref({
    color: "#f0f2f3",
    backgroundColor: "#088cf1",
    marginLeft: '5px'
})

const adFromStyleObj=ref({
  color: "#181818",
  backgroundColor: "#f0f2f3",
  marginLeft: '5px'
})

点击事件处理：

 if (flag==1){
    appStyleObj.value.color='#f0f2f3'
    appStyleObj.value.backgroundColor='#088cf1'
    adFromStyleObj.value.color='#181818'
    adFromStyleObj.value.backgroundColor='#f0f2f3'
  } else {
    appStyleObj.value.color='#181818'
    appStyleObj.value.backgroundColor='#f0f2f3'
    adFromStyleObj.value.color='#f0f2f3'
    adFromStyleObj.value.backgroundColor='#088cf1'
  }
}