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>

最後

非常簡單的小例子，實現也非常簡單，但卻很常用，特此總結記錄一下。