Vue.js中动态样式绑定和数据驱动示例-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42595747/article/details/132267343

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../vue.js/vue.js"></script>
    <style>
      .bg{
        background-color: red;
      }

      .bg_b{
        background-color: blue;
      }
      .font{
        font-size: 40px;
      }
      .fontColor{
        color: green;
      }

    </style>

    <body>
      <div id="app">

        <!-- style的最原始的法 -->
        <div :style="{fontSize:num+'px',color:aa}" v-on:click="change2">{{name}}</div>
        <br>

        <!-- 直接绑定data中的名字，绑定类名，去引用data里面的样式 -->
        <div v-bind:class="bg_red" v-on:click="change">{{name}}</div>
        <br>

        <!-- 对象的写法，引用的是style中的格式，true或者false -->
        <div v-bind:class="styleObject" v-on:click="change1">{{name}}</div>
        <br>

        <!-- 数组的写法，数组里的内容是style的样式，直接引用代表引用了，注意绑定class的时候写得是data中的key -->
        <div v-bind:class="styleList" v-on:click.stop="change">{{name}}</div>
        <br>


        
      </div>

      <script>
        let vm=new Vue(
          {
            el:"#app",
            data:{
              name:"小滴课堂",
              bg_red:"bg",
              styleObject:{
                bg:true,
                font:true,
                bg_b:false,
              },
              kong:" ",    
              red:"red",
              aa:"red",
              styleList:['font','fontColor','bg','bg_b'],
              num:30,
            },
            methods: {
              change(){
                this.bg_red='bg_b';
              },
              change1(){
                this.styleObject.bg=!this.styleObject.bg;
                this.styleObject.bg_b=!this.styleObject.bg_b;
              },
              change2(){
                this.num+=1;
              }
            },
          }
        )
      </script>
  </body>
</html>

Vue绑定样式,自我总结