【css/vue】使用css变量，在同一个页面根据不同情况改变字号等样式

解决方法是：将 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">
    .navTitle{
        /*
        	将 css 的属性使用 v-bind 与 Vue 组件的属性绑定
        	当组件的属性变化时，css 对应的属性值也就会随之变化
        */
        font-size: v-bind(fontSize);
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42