解决方法是:将 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,其他的页面是 18px
fontSizeChange(){
if(this.$route.query.title === '我的'){
this.fontSize = "15px"
}else{
this.fontSize = "18px"
}
}
},
watch: {
$route() {
// 由于我是用 url 参数来判定是否改变字号的,所以对路由进行了监听
this.fontSizeChange()
},
},
}
</script>
<style lang="scss">css">
.navTitle{
/*
将 css 的属性使用 v-bind 与 Vue 组件的属性绑定
当组件的属性变化时,css 对应的属性值也就会随之变化
*/
font-size: v-bind(fontSize);
}
</style>