之前的文章我们已经对 vue 有了初步认识, 这篇文章我们通过一个例子说一下 vue 的样式绑定.
现在我们想要是想这样一个需求, 页面上有个单词, 当我们点击它的时候颜色变为红色, 再点击一次变为原来的颜色. 按照以往的思路我们需要根据 JS 找到这个 DOM 然后对其进行样式上的修改, 那么在 vue 中该如何实现呢? 我们来看下面的代码:
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- <style>
- .red { color: red; }
- </style>
- </head>
- <body>
- <div id="app">
- <p :class="{red : active}" @click="handleClick">
- {{title}}
- </p>
- </div>
- <script>
- var App = new Vue({
- el: '#app',
- data: {
- title: "hello world",
- active: false
- },
- methods: {
- handleClick() {
- console.log("active 更改之前", this.active);
- this.active = !this.active;
- console.log("active 更改之后", this.active);
- }
- }
- })
- </script>
- </body>
- </HTML>
在上面的代码中我们我们在 data 里定义了一个 active 的数据, 设置为 false, 在 HTML 代码中我们定义了一个 p 标签, 标签内通过 :class 将其类名与 data 里的数据 active 建立联系, 通过 @click 将其与 methods 里的 handleClick() 方法建立联系.
之前我们提到, 在 vue 语法内是允许写 JS 逻辑代码的, 所以我们在 p 标签的 :class 内写了一个 {red: active} 的表达式, 意思是当 active 时 red 成立, 结合 data 里面的 active:false 可以得知, 当 active 为 false 时 class="", 当 active 为 true 时 class="red"; 然后我们在 <head> 的 <style> 里写了一个 .red 的样式, 定义为 color:red; 这样来控制 p 标签的颜色样式.
我们在 methods 的属性了定义了一个 handleClick() 方法, 当 p 标签被点击时触发, 将 data 数据里 active 在 true 和 false 之间切换.
根据上面的操作, 我们就可以不必操作 DOM 来控制 p 标签的样式, 最终结果如下:
上面的 :class 的方法显然能够完成我们想要的工作, 但是如果我们想要 p 标签有多个 class 类名该怎么办呢? 如下:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- <style>
- .red { color: red; } .font-size{ font-size: 30px; }
- </style>
- </head>
- <body>
- <div class="app">
- <p :id="[red,fontSize]" @click="handleClick">
- {{title}}
- </p>
- </div>
- <script>
- var App = new Vue({
- el: '#app',
- data: {
- title: "hello world",
- red: "",
- fontSize: "font-size"
- },
- methods: {
- handleClick() {
- console.log("执行前 red 数据", this.red);
- this.red = this.red === "red" ? "": "red";
- console.log("执行后 red 数据", this.red);
- }
- }
- })
- </script>
- </body>
- </HTML>
上面的代码中我们将 :class 置为了一个数组, 这样就可以在数组内添加多个 class 类名了, 如图我们添加了两个类名 .red 和 fontSize, 并在 data 数据内对他们分别进行了定义, 我们依据通过 handleClick() 方法来更改 .red 的样式, 这样就可以到达切换 p 标签的 style 样式和实现多个 class 类名, 结果如下:
以上方法我们是通过 class 类名来控制 HTML 的样式绑定, 那我们是否可以通过 style 样式来直接控制呢? 看以下代码:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- </head>
- <body>
- <div id="app">
- <p :style="styleObj" @click="handleClick">
- {{title}}
- </p>
- </div>
- <script>
- var App = new Vue({
- el: '#app',
- data: {
- title: "hello world",
- styleObj: {
- color: "black"
- }
- },
- methods: {
- handleClick() {
- console.log("执行前 styleObj.color 数据", this.styleObj.color);
- this.styleObj.color = this.styleObj.color === "black" ? "red": "black";
- console.log("执行后 styleObj.color 数据", this.styleObj.color);
- }
- }
- })
- </script>
- </body>
- </HTML>
以上代码我们将样式直接定义在了 :style 里面, 然后在 data 数据里对 :style 定义的 styleObj 进行样式书写, 在通过 handleClick() 方法对 styleObj 里的 color 样式进行修改, 这样也能达到和 :class 一样的效果. 结果如下:
那我们可不可以像 :class 那样定义数组的形式定义 :style 呢, 答案是可以的, 如下:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- </head>
- <body>
- <div id="app">
- <p :style="[styleObj, {fontSize:'30px'}]" @click="handleClick">
- {{title}}
- </p>
- </div>
- <script>
- var App = new Vue({
- el: '#app',
- data: {
- title: "hello world",
- styleObj: {
- color: "black"
- }
- },
- methods: {
- handleClick() {
- console.log("执行前 styleObj.color 数据", this.styleObj.color);
- this.styleObj.color = this.styleObj.color === "black" ? "red": "black";
- console.log("执行后 styleObj.color 数据", this.styleObj.color);
- }
- }
- })
- </script>
- </body>
- </HTML>
需要注意的是如果我们在 :style 数组里直接定义样式, 如果样式名是以 - 连接的, 需要写成驼峰的形式, 最终结果如下:
来源: https://www.cnblogs.com/weijiutao/p/10668558.html