Vue中class和style绑定

最新推荐文章于 2022-05-11 11:23:35 发布

Zdmzb

最新推荐文章于 2022-05-11 11:23:35 发布

阅读量179

点赞数

本文链接：https://blog.csdn.net/Zdmzb/article/details/105466492

版权

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   .page{
    width:200px;
    height:200px;
   }
   .active{
    background:red;
   }
  </style>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="app">
   <!-- <div class="page"></div> -->
   <!-- 通过对象的方式决定是否存在某个类 -->
   <div class="page" :class="{active:isTrue}"></div>
   <!-- 直接放置对象 -->
   <div class="page" :class="styleObj"></div>
   <!-- 放置数组 -->
   <div class="page" :class="styleArr"></div>
   <!-- 放置字符串 -->
   <div class="page" :class="styleStr"></div>
  </div>
  <script type="text/javascript">
   var app =new Vue({
    el:"#app",
    data:{
     isTrue:true,
     styleObj:{active:true},
     //直接用数组的方式进行添加和删除
     styleArr:["col-xs-12",'red-bg'],
     styleStr:"aas fg g f"
    }
   })
  </script>
 </body>
</html>