vue中绑定样式

最新推荐文章于 2024-06-03 17:48:06 发布

cathy18c

最新推荐文章于 2024-06-03 17:48:06 发布

阅读量230

点赞数

分类专栏： VUE框架

本文链接：https://blog.csdn.net/cathy18c/article/details/104387730

版权

VUE框架专栏收录该内容

32 篇文章 2 订阅

订阅专栏

比如我们要实现点击一次为红色，再点击还原，再点击红色，再点击还原，如此反复的效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <style>
        .activated{
            color: red;
        }
    </style>
  </head>
  <body>
    <div id="app">
      <div @click="handleClick" :class="{activated:isActivated}">hello world</div>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
            isActivated: false
        },
        methods:{
            handleClick(){
                this.isActivated=true
            }
        }
      });
    </script>
  </body>
</html>

给div绑定一个class，这个class是否显示取决于isActivated，如果isActivated是false那就不显示，如果是true就显示，但是这个demo有个问题,当点了一次变红后就一直是红色，换不了原了，因此代码要修改

var vm = new Vue({
        el: "#app",
        data: {
            isActivated: false
        },
        methods:{
            handleClick(){
                this.isActivated=!this.isActivated
            }
        }
      });

handleclick方法里面要改，对isActivated做一个取反，当data中的isActivated是false，点击后取反为true就显示class颜色变红，当data中的isActivated是true，点击后取反为false就不显示class

把这种语法叫做class的对象绑定

class也可以绑定数组，上面的代码也可以这么写

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <style>
        .activated{
            color: red;
        }
    </style>
  </head>
  <body>
    <div id="app">
      <div @click="handleClick" :class="[activated]">hello world</div>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
            activated: ''
        },
        methods:{
            handleClick(){
                this.activated=this.activated===''?'activated':''
            }
        }
      });
    </script>
  </body>
</html>

上面是通过calss，也可以通过style内联，style也有两种方式：对象和数组

<div id="app">
      <div @click="handleClick" :style="styleObj">hello world</div>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
            styleObj: {
                color:''
            }
        },
        methods:{
            handleClick(){
                this.styleObj.color=this.styleObj.color===''?'red':''
            }
        }
      });
    </script>

上面的例子是style绑定一个对象，下面这个例子是style绑定一个数组，

<div id="app">
      <div @click="handleClick" :style="[styleObj,{fontSize:'24px'}]">hello world</div>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
            styleObj: {
                color:''
            }
        },
        methods:{
            handleClick(){
                this.styleObj.color=this.styleObj.color===''?'red':''
            }
        }
      });
    </script>