Vue如何動態(tài)給id設置style樣式
更新時間：2023年06月06日 08:44:41 作者：慕白Lee
這篇文章主要介紹了Vue如何動態(tài)給id設置style樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue動態(tài)給id設置style樣式
背景
有個需求需要動態(tài)控制數(shù)字的顏色，監(jiān)聽之，然后設置對應顏色
代碼
1、監(jiān)聽字段
watch:{
? ? taskNum(to,do){
? ? ? ? if(to!=do)
? ? ? ? ? ? this.check();
? ? ? ? }
? ? },
methods:{
? ? check（）{
? ? },
}2、動態(tài)計算，達到條件后改變字體顏色
var d = document.getElementById("taskNum");
d.style.color="#808080";
d.style.width="20%";
d.style.left= "35%";vue中動態(tài)改變樣式
以往寫html代碼的時候是將組件綁定點擊函數(shù)然后通過ducument拿到css改變樣式，也可以在js代碼中用document拿別的class或id的樣式。
我們以用document實現(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的值以實現(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的值來實現(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)
}此處實現(xiàn)了一秒的動畫效果（從-80到10），在兩秒后回到-80的位置
彈窗效果展示
右下角的鎖同樣可以如此實現(xiàn)，除了改變還可以inner html來實現(xiàn)新加樣式
但在vue中使用document似乎有點行不通
那在vue中應該如何實現(xiàn)呢？
- 是可以通過綁定class樣式（或者style）在method中寫函數(shù)
- 或者同樣使用document來實現(xiàn)（這里涉及到全局的函數(shù)，windows操作等，等弄明白了再更新）
- 還有就是同樣在method中寫的 類似document 的方法：就是用 this.$refs函數(shù)，將組件綁定上ref值后拿style樣式
等我后邊更新吧~
ok，這邊更新一下
vue中改變樣式可以使用ref邦定標簽，然后通過this.refs.(ref值).style.(元素屬性，同document語法)
<div ref="test" style="background=red"> </div>
在函數(shù)中
method{
this.refs.test.style.background="blue";
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項目中有一些方法需要在多個頁面調(diào)用,但為了避免在每個頁面都import進來,可以把方法加到原型上去,這樣在每個組件中都能使用了,下面這篇文章主要給大家介紹了關(guān)于配置vue全局方法的兩種方式,需要的朋友可以參考下2021-09-09
vue使用mpegts.js實現(xiàn)播放flv的直播視頻流
這篇文章主要為大家詳細介紹了vue如何使用mpegts.js實現(xiàn)播放flv的直播視頻流,文中的示例代碼講解詳細,有需要的小伙伴可以參考一下2024-01-01
Vue執(zhí)行方法,方法獲取data值,設置data值,方法傳值操作
這篇文章主要介紹了Vue執(zhí)行方法,方法獲取data值,設置data值,方法傳值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue查詢數(shù)據(jù)并通過bootstarp?table渲染數(shù)據(jù)
這篇文章主要為大家介紹了Vue查詢數(shù)據(jù)并通過bootstarp?table渲染數(shù)據(jù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
Vue Element前端應用開發(fā)之開發(fā)環(huán)境的準備工作
這篇文章主要介紹了Vue Element前端應用開發(fā)之開發(fā)環(huán)境的準備工作，對Vue感興趣的同學，可以來學習一下2021-05-05
在本篇文章里小編給大家整理了關(guān)于vuex vue簡單使用知識點總結(jié)，有需要的朋友們可以參考下。2019-08-08
這篇文章主要給大家介紹了關(guān)于vue前端更新后需要清空緩存的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2024-10-10
我們在開web開發(fā)的時候，經(jīng)常會使用到element或者uview-ui,下面這篇文章主要給大家介紹了關(guān)于在uni-app中使用element-ui的方法與報錯解決的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue 封裝 Adminlte3組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了Vue 組件修改根實例的數(shù)據(jù)的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04