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

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

编程文章jaq1232025-03-28 12:24:4916A+A-

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

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

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

1、定义5个css样式,

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


Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。


Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。

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


执行效果:

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

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

2、定义展示区域

Vue 要实现异步加载需要使用到 vue-resource 库。
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

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

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为样式的对象

Vue 要实现异步加载需要使用到 vue-resource 库。
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

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

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、效果展示:

代码截图

全部源码:




    
    Title
    
    <script src="static/js/vue.js"></script>
    <script src="static/js/axios.js"></script>
    


Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。


Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。

Vue 要实现异步加载需要使用到 vue-resource 库。
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

Vue 要实现异步加载需要使用到 vue-resource 库。
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

<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>

点击这里复制本文地址 以上内容由jaq123整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

苍茫编程网 © All Rights Reserved.  蜀ICP备2024111239号-21