其他分享
首页 > 其他分享> > vue中这样控制css样式更slay

vue中这样控制css样式更slay

作者:互联网

写在前面:

我是「沸羊羊_」,昵称来自于姓名的缩写 fyy ,之前呕心沥血经营的博客因手残意外注销,现经营此账号。
本人是个小菜,正向着全栈工程师的方向努力着,文章可能并不高产,也很基础,但每写一篇都在用心总结,请大佬勿喷。
如果您对编程有兴趣,请关注我的动态,一起学习研究。
感谢每位读者!

动态加载css

使用场景:

我们在使用很多 app 时,可能都会发现,当执行某一操作后,页面样式会随着操作而变化,这就是动态加载css,如何实现?

实现:

我们通过一个小例子还原一下场景。
在这里插入图片描述

//代码实现
<template>
  //绑定class
  <van-button round :class="btn" @click="changeBlue" v-touch:long="(e)=>changeCoral()">变色</van-button>
</template>

<style scoped>
.btn1 {
  background-color: coral;
}
.btn2 {
  background-color: cornflowerblue;
}
</style>
<script>
export default {
  data() {
    return {
    //默认是橙色
      btn: "btn1"
    };
  },
  methods: {
    changeBlue() {
    //单击触发改变样式
      this.btn = "btn2";
    },
    //长按触发改变样式
    changeCoral() {
      this.btn = "btn1";
    }
  }
};
</script>

最后

非常简单的小例子,实现也非常简单,但却很常用,特此总结记录一下。

标签:vue,slay,样式,color,background,btn,btn1,css
来源: https://blog.csdn.net/weixin_42653522/article/details/106753873