Vue如何動態(tài)給id設(shè)置style樣式
更新時(shí)間：2023年06月06日 08:44:41 作者：慕白Lee
這篇文章主要介紹了Vue如何動態(tài)給id設(shè)置style樣式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue動態(tài)給id設(shè)置style樣式
背景
有個需求需要動態(tài)控制數(shù)字的顏色，監(jiān)聽之，然后設(shè)置對應(yīng)顏色
代碼
1、監(jiān)聽字段
watch:{
? ? taskNum(to,do){
? ? ? ? if(to!=do)
? ? ? ? ? ? this.check();
? ? ? ? }
? ? },
methods:{
? ? check（）{
? ? },
}2、動態(tài)計(jì)算，達(dá)到條件后改變字體顏色
var d = document.getElementById("taskNum");
d.style.color="#808080";
d.style.width="20%";
d.style.left= "35%";vue中動態(tài)改變樣式
以往寫html代碼的時(shí)候是將組件綁定點(diǎn)擊函數(shù)然后通過ducument拿到css改變樣式，也可以在js代碼中用document拿別的class或id的樣式。
我們以用document實(shí)現(xiàn)彈窗效果為例
<!-- 彈窗 -->
<div class="popbar" id="popbar">
<h3 class="notice">來啦</h3>
</div>.popbar{
position: absolute;
width: 340px;
height: 60px;
box-shadow: 0 0 5px 1px #464647;
border-radius: 15px;
border: none;
margin-right: 10px;
//改變margin-top的值以實(shí)現(xiàn)彈窗效果
margin-top: -80px;//end 10px
margin-left: 10px;
background-color: rgba(100, 235, 102, 0.6);
transition: all 0.5s;
.notice{
margin-top: 11.5px;
text-align: center;
font-size: 25px;
color: aliceblue;
}
}這里我們通過改變margin-top的值來實(shí)現(xiàn)彈窗效果，js代碼如下
function lock(){
document.getElementById("barlock").style.transform = "scale(1)"
document.getElementById("popbar").style.marginTop= "10px"
setTimeout(() => {
document.getElementById("popbar").style.marginTop= "-80px"
},2000)
}此處實(shí)現(xiàn)了一秒的動畫效果（從-80到10），在兩秒后回到-80的位置
彈窗效果展示
右下角的鎖同樣可以如此實(shí)現(xiàn)，除了改變還可以inner html來實(shí)現(xiàn)新加樣式
但在vue中使用document似乎有點(diǎn)行不通
那在vue中應(yīng)該如何實(shí)現(xiàn)呢？
- 是可以通過綁定class樣式（或者style）在method中寫函數(shù)
- 或者同樣使用document來實(shí)現(xiàn)（這里涉及到全局的函數(shù)，windows操作等，等弄明白了再更新）
- 還有就是同樣在method中寫的 類似document 的方法：就是用 this.$refs函數(shù)，將組件綁定上ref值后拿style樣式
等我后邊更新吧~
ok，這邊更新一下
vue中改變樣式可以使用ref邦定標(biāo)簽，然后通過this.refs.(ref值).style.(元素屬性，同document語法)
<div ref="test" style="background=red"> </div>
在函數(shù)中
method{
this.refs.test.style.background="blue";
}總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^來的數(shù)據(jù),與data、el、ref是一個級別的配置項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設(shè)置Props的相關(guān)資料,需要的朋友可以參考下2022-06-06
本篇文章給大家詳細(xì)介紹了vue跨域處理問題的方式以及相關(guān)知識點(diǎn)介紹，對此有興趣的朋友學(xué)習(xí)下。2018-02-02
vue3修改link標(biāo)簽?zāi)J(rèn)icon無效問題詳解
這篇文章主要介紹了vue3修改link標(biāo)簽?zāi)J(rèn)icon無效問題詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vite中使用Ant?Design?Vue3.x框架教程示例
這篇文章主要為大家介紹了Vite中使用Ant?Design?Vue3.x框架教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Vue3快速實(shí)現(xiàn)文件上傳OSS的方法詳解
這篇文章給大家介紹了Vue3快速實(shí)現(xiàn)文件上傳OSS的方法,上傳文件可以說是經(jīng)典的需求了,在后臺管理項(xiàng)目中隨處可見,一般是由前端進(jìn)行文件上傳,然后再由后端去處理,本文旨在實(shí)現(xiàn)上傳功能,不考慮額外的功能（如文件尺寸限制）,感興趣的朋友可以參考下2024-01-01
這篇文章主要介紹了vue+eslint+vscode配置教程，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
基于Vue實(shí)現(xiàn)自定義組件的方式引入圖標(biāo)
在vue項(xiàng)目中我們經(jīng)常遇到圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于如何基于Vue實(shí)現(xiàn)自定義組件的方式引入圖標(biāo)的相關(guān)資料,文章通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
vue中el-tree?橫向滾動條的實(shí)現(xiàn)
本文詳細(xì)介紹了在Vue框架中使用el-tree組件創(chuàng)建橫向滾動條的方法,通過代碼示例和步驟說明,幫助開發(fā)者理解和實(shí)現(xiàn)橫向滾動功能,感興趣的可以了解一下2024-09-09
本篇文章主要介紹了VUE實(shí)現(xiàn)日歷組件功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了vue-cli 如何打包上線的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05