vue样式绑定的几种方式

 <div id="box">
    <p class="success" :class="isShow?'add':'reduce'">三元运算符添加样式</p>
    <p class="success" :class="{active:isShow,hover:isShow}">对象形式添加样式</p>
    <p class="success" :class="['who','hover']">数组形式添加</p>
    <p class="success" :style="{background:color}">style动态绑定</p>
    <p class="success" :style="obj">style对象形式动态绑定</p>
    <p class="success" :style="[obj,obj1]">style数组形式动态绑定</p>
  </div>
  <script src="lib/vue.js"></script>
  <script type="text/javascript">
  var app = new Vue({
    el:"#box",
    data:{
      isShow:true,
      who:"aaa",
      color:"red",
      obj:{
        background:"red",
        fontSize:"24px",
      },
      obj1:{
        color:"#fff",
      }
    },
  })
  </script>

 

posted @ 2021-11-22 12:50  云里知音  阅读(83)  评论(0)    收藏  举报