vue,style動態綁定css,綁定hover


vue的動態綁定css的話其實還好,不太難,難的是hover屬性,

這個找了好久沒找到怎么整,后來在stackoverflow上面看到了個https://stackoverflow.com/questions/46551925/vuejs-v-bindstyle-hover

1.首先在style 綁定一個變量

:style='styleObject'

2.在computed寫一個計算屬性

    styleObject() {
      return {
        "--background-color": this.buttonColor,
        "--background-color-hover": this.buttonHover,
      };
    },
3.data中定義buttonColor,buttonHover
4.最后直接在css中用
background-color:var(--background-color)
:hover里面
background-color:var(--background-color-hover)
完美
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM