更改样式通常有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>