Vue基础入门，第15节 一键页面换新衣，动态修改样式的3种方法
更改样式通常有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>