Vue基础入门，第15节一键页面换新衣，动态修改样式的3种方法

zhezhongyun 2025-07-28 01:23 26 浏览

更改样式通常有3种方法可以实现，几乎可以应对所有可能性的需求。

样式更改分为：字符串修改、数组修改、对象修改。

一、字符串形式对样式进行更改，适用于样式名字不确定,需要动态指定的情况

1、定义5个css样式，

<style>
    .c {
        /*居中对其*/
        text-align: center
    }

    .c1 {
        font-size: 25px;
        color: blue;
        text-decoration: line-through
    }

    .c2 {
        font-size: 15px;
        color: red;
        text-decoration: underline
    }

    .c3 {
        font-family: "楷体";
        font-style: italic;
    }

    .c4 {
        font-family: "黑体";
        font-style: oblique
    }
</style>

2、定义2个展示区域，内容是对应文本，基本样式为c c1（或c2），附加样式x1（或x2）。

<!--    绑定class样式, 字符串写法,适用于样式名字不确定,需要动态指定-->
<p class="c c1" :class="x1">Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。</p>
<br>
<!--    绑定class样式, 字符串写法,适用于样式名字不确定,需要动态指定-->
<p class="c c2" :class="x2">Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。</p>

3、定义2个按钮，用于改变展示区域的样式内容，@click="x1 = `c4`"即将样式内容更改为c4

<button class="btn btn-block btn-primary" @click="x1 = `c4`">更换第1行字体样式</button>
<button class="btn btn-block btn-success" @click="x2 = `c3`">更换第2行字体样式</button>

执行效果：

二、数组形式对样式进行更改，适用于样式个数不确定，名字不确定的情况

1、定义5个CSS样式，同上第1步

2、定义展示区域

<p class="c" :class="x9">
    Vue 要实现异步加载需要使用到 vue-resource 库。<br>
    Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
</p>

3、定义按钮，对字体内容更新更改

<button class="btn btn-block btn-danger" @click="change3()">更换第3行字体样式</button>

4、定义按钮对应的click方法，实现为随机进行更改样式

change3() {
    let arr = ["c1", "c2", "c3", "c4"]
    let x = Math.floor(Math.random() * arr.length)
    console.log(x, arr[x])
    this.x9 = [arr[x], "c1"]
},

5、执行效果

三、采用对象的写法修改class样式，适用于样式个数确定,名字确定,需要使用的动态指定的情况

1、指定展示区域，x91为样式的对象

<p class="c" :class="x91">
    Vue 要实现异步加载需要使用到 vue-resource 库。<br>
    Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
</p>

2、定义1个按钮，用于改变样式

<button class="btn btn-block btn-danger" @click="change4()">更换第3行字体样式</button>

3、定义X91的样式对象

data: {
    x91: {
        c1: true,
        c2: true,
        c3: true,
        c4: true
    }
},

4、通过按钮操作方法change4，将值取反

methods: {
    change4() {
        this.x91.c1 = !this.x91.c1
        this.x91.c2 = !this.x91.c2
        this.x91.c3 = !this.x91.c3
        this.x91.c4 = !this.x91.c4
    }
},

5、效果展示：

代码截图

全部源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <script src="static/js/vue.js"></script>
    <script src="static/js/axios.js"></script>
    <style>
        .c {
            /*居中对其*/
            text-align: center
        }

        .c1 {
            font-size: 25px;
            color: blue;
            text-decoration: line-through
        }

        .c2 {
            font-size: 15px;
            color: red;
            text-decoration: underline
        }

        .c3 {
            font-family: "楷体";
            font-style: italic;
        }

        .c4 {
            font-family: "黑体";
            font-style: oblique
        }
    </style>
</head>
<body class="container">
<div id="app">
    <button class="btn btn-block btn-primary" @click="x1 = `c4`">更换第1行字体样式</button>
    <button class="btn btn-block btn-success" @click="x2 = `c3`">更换第2行字体样式</button>
    <button class="btn btn-block btn-danger" @click="change3()">更换第3行字体样式</button>
    <button class="btn btn-block btn-danger" @click="change4()">更换第3行字体样式</button>
    <!--    绑定class样式, 字符串写法,适用于样式名字不确定,需要动态指定-->
    <p class="c c1" :class="x1">Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。</p>
    <br>
    <!--    绑定class样式, 字符串写法,适用于样式名字不确定,需要动态指定-->
    <p class="c c2" :class="x2">Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。</p>

    <!--    绑定class样式, 数组写法,适用于样式个数不确定,名字不确定-->
    <p class="c" :class="x9">
        Vue 要实现异步加载需要使用到 vue-resource 库。<br>
        Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
    </p>

    <!--    绑定class样式, 对象写法,适用于样式个数确定,名字确定,需要使用的动态指定-->
    <p class="c" :class="x91">
        Vue 要实现异步加载需要使用到 vue-resource 库。<br>
        Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
    </p>
</div>
<script>
    Vue.config.productionTip = false
    new Vue({
        el: "#app",
        data: {
            x1: "c3",
            x2: "c4",
            x9: ["c1", "c3"],
            x91: {
                c1: true,
                c2: true,
                c3: true,
                c4: true
            }
        },
        methods: {
            change3() {
                let arr = ["c1", "c2", "c3", "c4"]
                let x = Math.floor(Math.random() * arr.length)
                console.log(x, arr[x])
                this.x9 = [arr[x], "c1"]
            },
            change4() {
                this.x91.c1 = !this.x91.c1
                this.x91.c2 = !this.x91.c2
                this.x91.c3 = !this.x91.c3
                this.x91.c4 = !this.x91.c4
            }
        },
        computed: {},
        watch: {},
    })
</script>
</body>
</html>

text-decoration-line 属性

上一篇：搞趣网:六龙争霸3D功勋有什么用功勋作用介绍
下一篇：用deepseek开发一款记事日历（用deepseek搭建本地知识库）

Vue基础入门，第15节一键页面换新衣，动态修改样式的3种方法

一、字符串形式对样式进行更改，适用于样式名字不确定,需要动态指定的情况

二、数组形式对样式进行更改，适用于样式个数不确定，名字不确定的情况

三、采用对象的写法修改class样式，适用于样式个数确定,名字确定,需要使用的动态指定的情况

代码截图

全部源码：

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

Vue基础入门，第15节 一键页面换新衣，动态修改样式的3种方法

一、 字符串形式对样式进行更改，适用于样式名字不确定,需要动态指定的情况

二、 数组形式对样式进行更改，适用于样式个数不确定，名字不确定的情况

三、采用对象的写法修改class样式，适用于样式个数确定,名字确定,需要使用的动态指定的情况

代码截图

全部源码：

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

Vue基础入门，第15节一键页面换新衣，动态修改样式的3种方法

一、字符串形式对样式进行更改，适用于样式名字不确定,需要动态指定的情况

二、数组形式对样式进行更改，适用于样式个数不确定，名字不确定的情况