Vue如何动态给id设置style样式
作者：慕白Lee
这篇文章主要介绍了Vue如何动态给id设置style样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue动态给id设置style样式
背景
有个需求需要动态控制数字的颜色，监听之，然后设置对应颜色
代码
1、监听字段
watch:{
taskNum(to,do){
if(to!=do)
this.check();
}
},
methods:{
check（）{
},
}2、动态计算，达到条件后改变字体颜色
var d = document.getElementById("taskNum");
d.style.color="#808080";
d.style.width="20%";
d.style.left= "35%";vue中动态改变样式
以往写html代码的时候是将组件绑定点击函数然后通过ducument拿到css改变样式，也可以在js代码中用document拿别的class或id的样式。
我们以用document实现弹窗效果为例
<!-- 弹窗 -->
<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的值以实现弹窗效果
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的值来实现弹窗效果，js代码如下
function lock(){
document.getElementById("barlock").style.transform = "scale(1)"
document.getElementById("popbar").style.marginTop= "10px"
setTimeout(() => {
document.getElementById("popbar").style.marginTop= "-80px"
},2000)
}此处实现了一秒的动画效果（从-80到10），在两秒后回到-80的位置
弹窗效果展示
右下角的锁同样可以如此实现，除了改变还可以inner html来实现新加样式
但在vue中使用document似乎有点行不通
那在vue中应该如何实现呢？
- 是可以通过绑定class样式（或者style）在method中写函数
- 或者同样使用document来实现（这里涉及到全局的函数，windows操作等，等弄明白了再更新）
- 还有就是同样在method中写的 类似document 的方法：就是用 this.$refs函数，将组件绑定上ref值后拿style样式
等我后边更新吧~
ok，这边更新一下
vue中改变样式可以使用ref邦定标签，然后通过this.refs.(ref值).style.(元素属性，同document语法)
<div ref="test" style="background=red"> </div>
在函数中
method{
this.refs.test.style.background="blue";
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。