前言：
现在兄弟们对“ajax修改另外一个页面内容”大约比较讲究，各位老铁们都想要知道一些“ajax修改另外一个页面内容”的相关内容。那么小编也在网上收集了一些对于“ajax修改另外一个页面内容””的相关知识，希望姐妹们能喜欢，你们快快来学习一下吧！更改样式通常有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> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #ajax修改另外一个页面内容
