lovecoding
/
VIP22


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!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>
  <style>
    .aa{
      width: 200px;
      height: 200px;
      background: red;
    }
    .bb{
      color: blue;
      font-size: 50px;
    }
    .cc{
      color:green
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click="change()">click</button>
    <!-- v-bind 动态绑定属性  -->
    <!-- <div v-bind:id="name"></div> -->
    <div :id="name"></div>
    <!-- <div class="aa bb">aaaaa</div> -->


    <!-- <div :class="{aa:isA,bb:isB}">aaaaaa</div> -->
    <!-- <div :class="[class1,class2]">2222222222222222</div> -->

    <!-- <div :class="[flag?class2:class3]">3333333</div> -->

    <!-- <div style="width:200px;height:200px"></div>
    <div :style="{color: color1}"></div> -->

    <div :style="[s1,s2]"></div>
  </div>
  <script src="vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data:{
        name:"zs",
        class1: 'aa',
        class2: 'bb',
        class3: 'cc',
        isA: true,
        isB: true,
        flag:false,
        color:'green',
        s1:{
          width:'100px',
          height:'100px'
        },
        s2:{
          background:'red'
        }
      },
      methods:{
        change(){
          this.name = 'lisi'
          // this.class2 = 'cc'
        }
      }
    })
  </script>
</body>
</html>