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

news/2024/7/10 2:02:51 标签: css, vue.js, 前端, vue

解决方法是:将 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>

http://www.niftyadmin.cn/n/5204968.html

相关文章

IvorySQL3.0:基于PG16.0最新内核,实现兼容Oracle数据库再升级

Oracle作为全球最大的数据库厂商之一&#xff0c;具有较高的市场知名度和份额。但随着数据处理需求日益增长&#xff0c;使用Oracle的企业可能面临一些挑战&#xff0c;如数据库复杂性、高昂维护成本、数据迁移和集成问题等&#xff0c;难以满足企业实时数据处理需求&#xff0…

《C++ Primer》第9章 顺序容器(一)

参考资料&#xff1a; 《C Primer》第5版《C Primer 习题集》第5版 C 中的容器可以分为 3 类&#xff1a;顺序容器、关联容器、无序关联容器。 9.1 顺序容器概述&#xff08;P292&#xff09; 所有顺序容器都提供了快速顺序访问的能力&#xff0c;但在以下方面的性能有所不…

最易上手的电子期刊制作工具,快来使用!

快节奏时代&#xff0c;纸质书籍逐渐淡出人们的视野&#xff0c;取而代之的就是电子刊物制作。而电子期刊开始寻求更多的互动和丰富的内容形式&#xff0c;给人以良好的阅读体验。 如何制作呢&#xff1f;便成为了当下必须要学会的新技能&#xff0c;接下来分享一个比PPT更简单…

代码随想录-刷题第四天

24. 两两交换链表中的节点 题目链接&#xff1a;24. 两两交换链表中的节点 思路&#xff1a;直接用递归的方式来写&#xff0c;只要搞明白递归函数的定义&#xff0c;然后利用这个定义就可以完成这道题。 class Solution {// 定义&#xff1a;输入以 head 开头的单链表&…

github访问不了问题

git clone github上的项目的时候&#xff0c;不是访问不了&#xff0c;就是克隆过程被中断了 最近找到一个代理&#xff0c;从代理那里clone而不是github上 GitHub代理 – 初果编程

02房价预测

目录 代码 评分算法&#xff1a; 代码 import numpy as np from sklearn import datasets from sklearn.linear_model import LinearRegression# 指定版本才有数据集 # C:\Users\14817\PycharmProjects\pythonProject1\venv\Scripts\activate.bat # pip install scikit-le…

SSH连接远程服务器报错:WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED 解决方法

一.错误描述 报错信息里提示了路径信息/root/.ssh/known_hosts:20 二.解决方案 方法一 输入以下指令&#xff1a; ssh-keygen -R XXX&#xff08;需要连接远程服务器的ip&#xff09; 按照我的例子ip:10.165.7.136&#xff0c;会返回以下信息: 重新尝试连接&#xff1a; 输…

在windows笔记本中安装tensorflow1.13.2版本的gpu环境2

tensorflow1.13.2版本的gpu环境 看python-anacona的安装只需要看1.1部分即可 目录 1.1 Anaconda安装 1.2 tensorflow-gpu安装 1.3 python编译器-pycharm安装 1.1 Anaconda安装 从镜像源处下载anaconda&#xff0c;地址&#xff1a;Index of /anaconda/archive/ | 北京…