vue 的 :style动态切换背景色和字体

最新推荐文章于 2025-02-07 17:29:45 发布

爱学习的小饼干

最新推荐文章于 2025-02-07 17:29:45 发布

阅读量3.9k

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41813243/article/details/122083443

版权

笔记专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何在Vue.js中利用`:style`指令动态地切换元素的背景颜色和字体样式。通过绑定数据属性，实现不同条件下的样式切换，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>Document</title>
    <style>
        .colorList li {
            display: inline-block;
            padding: 10px;
            list-style: none;
        }

        .colorList li div {
            width: 20px;
            height: 20px;
        }

        .colorList li:nth-child(1) div {
            background-color: #fff;
            border: 1px solid #dbdbdb;
        }

        .colorList li:nth-child(2) div {
            background-color: #cefeff;
            border: 1px solid #cefeff;
        }

        .colorList li:nth-child(3) div {
            background-color: #f8f8c3;
            border: 1px solid #f8f8c3;
        }

        .colorList li:nth-child(4) div {
            background-color: #ffc7ff;
            border: 1px solid #ffc7ff;
        }

        .colorList li:nth-child(5) div {
            background-color: #9bccfa;
            border: 1px solid #9bccfa;
        }

        .fsul li {
            display: inline-block;
            padding: 10px;
            list-style: none;
        }

        .box {
            border: 1px solid #999;
            width: 500px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul class="colorList">
            <li>
                <div :class="{ chooseed: cbg == 'colorbg1' }" @click="cbg = 'colorbg1'">
                </div>
            </li>
            <li>
                <div :class="{ chooseed: cbg == 'colorbg2' }" @click="cbg = 'colorbg2'">
                </div>
            </li>
            <li>
                <div :class="{ chooseed: cbg == 'colorbg3' }" @click="cbg = 'colorbg3'">
                </div>
            </li>
            <li>
                <div :class="{ chooseed: cbg == 'colorbg4' }" @click="cbg = 'colorbg4'">
                </div>
            </li>
            <li>
                <div :class="{ chooseed: cbg == 'colorbg5' }" @click="cbg = 'colorbg5'">
                </div>
            </li>
        </ul>

        <ul class="fsul"> 视力保护色：
            <li>
                <div :class="{ chooseed: csize == 'fs1', chooseed:ccsize == 'fff1', chooseed:cccsize == 'sss1'}" @click="csize = 'fs1',ccsize = 'fff1',cccsize = 'sss1'">
                    大
                </div>
            </li>
            <li>
                <div :class="{ chooseed: csize == 'fs2' , chooseed:ccsize == 'fff2', chooseed:cccsize == 'sss2'}" @click="csize = 'fs2',ccsize = 'fff2',cccsize = 'sss2'">
                    中
                </div>
            </li>
            <li>
                <div :class="{ chooseed: csize == 'fs3' , chooseed:ccsize == 'fff3', chooseed:cccsize == 'sss3'}" @click="csize = 'fs3',ccsize = 'fff3',cccsize = 'sss3'">
                    小
                </div>
            </li>
        </ul>

        <div class="box"
            :style="{backgroundColor:cbg == 'colorbg1'?'#fff':cbg == 'colorbg2'?'#cefeff':cbg == 'colorbg3'?'#f8f8c3':(cbg == 'colorbg4'?'#ffc7ff':'#9bccfa')}">

            <div :style="{fontSize:csize == 'fs1'?'32px':(csize == 'fs2'?'26px':'24px')}">
                全市疫情防线筑得牢不牢？纪检监察机关进行精准监督
            </div>

            <div :style="{fontSize:ccsize == 'fff1'?'18px':(ccsize == 'fff2'?'16px':'14px')}">
                发布时间：2021年09月10日            发布人：马超          发布部门：办公室          点
            </div>

            <div :style="{fontSize:cccsize == 'sss1'?'20px':(cccsize == 'sss2'?'18px':'16px')}">
                本轮防疫工作开展以来，市纪委监委闻令而动，将疫情防控作为当前政治监督的首要任务、头等大事，迅
            </div>

        </div>

    </div>
</body>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            cbg: "colorbg1",
            csize: "fs2",
            ccsize: "fff2",
            cccsize: "sss2",
        },

       
    })
</script>


</html>