Vue-class与style动态变化

发布于 2020-02-26  177 次阅读 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">

<script type="text/javascript" src="lib/vue.js"></script>

<style>
  

   .red {
    background-color: red;
   }

   .yellow{
    background-color: yellow;
   }
   .aaa{

   }

   .bbb{

   }
</style>
</head>
<body>
    <div id="box">
        <button @click="handleClick()">change</button>
        <div :class="classobj">
          我是动态切换class- 对象写法
        </div>
        <div :class="classarr">
          我是动态切换class- 数组写法
        </div>


        <div style="background: red">我是静态的style</div>

        <div :style="styleobj">我是动态切换style--对象写法</div>

        <div :style="stylearr">我是动态切换style--数组写法</div>
    </div>

    <script type="text/javascript">
    	
    	var vm = new Vue({
    		el:"#box",
        data:{
         
          classobj:{
            "a":true,
            "b":true,
            "c":false
          },

          styleobj:{
            background:'red',
            fontSize:'30px'
          },

          classarr:["a"],
          stylearr:[{background:'yellow'}]
        },

        methods:{
          
        }
        
       }) 
      // Vue.set(vm.classObj,"dd",true);
      // .style.fontSize="30px";
    </script>
</body>
</html>

 

注错之当