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样式

等我后边更新 今天肩膀很疼

2023.2.11

明天开学了，这边更新一下

vue中改变样式可以使用ref邦定标签，然后通过this.refs.(ref值).style.(元素属性，同document语法)

<div ref="test" style="background=red"> </div>

在函数中

method{
    this.refs.test.style.background="blue";
}