解決方法是:將 css 的屬性使用 v-bind 與 Vue 組件的屬性綁定,當組件的屬性變化時,css 對應的屬性值也就會隨之變化;
具體實現代碼:
<template><div><span class="navTitle">標題名</span> </div>
</template>
<script>export default {data() {return {fontSize: "18px"}},created() {this.fontSizeChange()},methods: {// 比如只需要“我的”字號是 15px,其他的頁面是 18pxfontSizeChange(){if(this.$route.query.title === '我的'){this.fontSize = "15px"}else{this.fontSize = "18px"}}},watch: {$route() {// 由于我是用 url 參數來判定是否改變字號的,所以對路由進行了監聽this.fontSizeChange()},},}
</script>
<style lang="scss">.navTitle{/*將 css 的屬性使用 v-bind 與 Vue 組件的屬性綁定當組件的屬性變化時,css 對應的屬性值也就會隨之變化*/font-size: v-bind(fontSize);}
</style>