Vue中的样式绑定

2019年1月22日08:21:45 发表评论 阅读(1,772)

在开发的过程中我们需要对一些dom元素添加一些样式,那么在vue中我们要如何给dom绑定样式呢?我们先通过一个实例来了解一下,本文通过三种方法来实现:

效果图:

Vue中的样式绑定

class的对象绑定

  1.     <style>
  2.         .activated {
  3.             color: red;
  4.         }
  5.     </style>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <div @click="handleDivClick"
  10.             :class="{activated: isActivated}">
  11.             Hello world
  12.         </div>
  13.     </div>
  14.     <script>
  15.         var vm = new Vue({
  16.             el: "#app",
  17.             data: {
  18.                 isActivated: false
  19.             },
  20.             methods: {
  21.                 handleDivClick: function() {
  22.                     this.isActivated = !this.isActivated;
  23.         }
  24.             }
  25.         })
  26.     </script>

实现的效果是,打开页面,Hello world的文字默认是没有样式效果的,点击一下就会变为红色,再点击就会变为默认颜色,这是因为我给Hello world添加了点击事件,并给Hello world添加了对象样式为activated,状态为isActivated,isActivated默认为false不显示样式,当我们点击Hello world的文字时,会触发handleDivClick函数,这个函数会改变isActivated为相反的状态。

class的变量绑定

同样的,我们来以一个实例来进行说明,代码如下:

  1.     <style>
  2.         .activated {
  3.             color: red;
  4.         }
  5.     </style>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <div @click="handleDivClick"
  10.             :class="[activated]">
  11.             Hello world
  12.         </div>
  13.     </div>
  14.     <script>
  15.         var vm = new Vue({
  16.             el: "#app",
  17.             data: {
  18.                 activated: ""
  19.             },
  20.             methods: {
  21.                 handleDivClick: function() {
  22.                     this.activated = this.activated === "activated" ? "" : "activated";
  23.         }
  24.             }
  25.         })
  26.     </script>

实现的效果和上面的代码一样,都是点击变色,但是不同的是这个class绑定的是一个数组,数组里面写的是一个变量,既然是数组那么就可以在里面写入多个变量,比如我们在上面代码的第十行这样写:class="[activated,activatedOne]">然后在data中写上activatedOne: "activated-one",那么打开页面Hello world的默认样式就是名字为activated-one的样式。

class的内联样式

我们来看一下代码:

  1. <div id="app">
  2.     <div :style="styleObj" @click="handleDivOclick">
  3.         Hello world
  4.     </div>
  5. </div>
  6. <script>
  7.     var vm = new Vue({
  8.         el: "#app",
  9.         data: {
  10.             styleObj: {
  11.               color: "black"
  12.           }
  13.         },
  14.         methods: {
  15.             handleDivOclick: function () {
  16.                 this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
  17.             }
  18.         }
  19.     })
  20. </script>

实现的效果和上面的代码一样,也是点击变色,不同的是采用内联样式,这里我就不在赘述了,看代码就可以看出来。

最后

无论是绑定style还是绑定class都有两种方式,一种是对象的方式,一种是数组的方式。

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛