在开发的过程中我们需要对一些dom元素添加一些样式,那么在vue中我们要如何给dom绑定样式呢?我们先通过一个实例来了解一下,本文通过三种方法来实现:
效果图:
class的对象绑定
- <style>
- .activated {
- color: red;
- }
- </style>
- </head>
- <body>
- <div id="app">
- <div @click="handleDivClick"
- :class="{activated: isActivated}">
- Hello world
- </div>
- </div>
- <script>
- var vm = new Vue({
- el: "#app",
- data: {
- isActivated: false
- },
- methods: {
- handleDivClick: function() {
- this.isActivated = !this.isActivated;
- }
- }
- })
- </script>
实现的效果是,打开页面,Hello world的文字默认是没有样式效果的,点击一下就会变为红色,再点击就会变为默认颜色,这是因为我给Hello world添加了点击事件,并给Hello world添加了对象样式为activated,状态为isActivated,isActivated默认为false不显示样式,当我们点击Hello world的文字时,会触发handleDivClick函数,这个函数会改变isActivated为相反的状态。
class的变量绑定
同样的,我们来以一个实例来进行说明,代码如下:
- <style>
- .activated {
- color: red;
- }
- </style>
- </head>
- <body>
- <div id="app">
- <div @click="handleDivClick"
- :class="[activated]">
- Hello world
- </div>
- </div>
- <script>
- var vm = new Vue({
- el: "#app",
- data: {
- activated: ""
- },
- methods: {
- handleDivClick: function() {
- this.activated = this.activated === "activated" ? "" : "activated";
- }
- }
- })
- </script>
实现的效果和上面的代码一样,都是点击变色,但是不同的是这个class绑定的是一个数组,数组里面写的是一个变量,既然是数组那么就可以在里面写入多个变量,比如我们在上面代码的第十行这样写:class="[activated,activatedOne]">
然后在data中写上activatedOne: "activated-one"
,那么打开页面Hello world的默认样式就是名字为activated-one的样式。
class的内联样式
我们来看一下代码:
- <div id="app">
- <div :style="styleObj" @click="handleDivOclick">
- Hello world
- </div>
- </div>
- <script>
- var vm = new Vue({
- el: "#app",
- data: {
- styleObj: {
- color: "black"
- }
- },
- methods: {
- handleDivOclick: function () {
- this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
- }
- }
- })
- </script>
实现的效果和上面的代码一样,也是点击变色,不同的是采用内联样式,这里我就不在赘述了,看代码就可以看出来。
最后
无论是绑定style还是绑定class都有两种方式,一种是对象的方式,一种是数组的方式。
微信小程序
互联网开发,终身学习者,欢迎您的关注!