Class

  1. <head>
  2.     <style>
  3.         .page {
  4.             height: 200px;
  5.             width: 200px;
  6.         }        
  7.         .active {
  8.             background: skyblue
  9.         }
  10.     </style>
  11. </head>
  13. <body>
  14.     <div id="app">
  15.         <!-- 通过对象形式判断 -->
  16.         <div class="page" :class="{active:isTrue}"></div>
  17.         <!-- 直接放置对象 -->
  18.         <div class="page" :class=objActive></div>
  19.         <!-- 放置数组 -->
  20.         <div class="page" :class=arryActive></div>
  21.         <!-- 数组对象混合 -->
  22.         <div class="page" :class=objAndArray></div>
  23.     </div>
  25.     <script type="text/javascript">
  26.         let app = new Vue({
  27.             el: '#app',
  28.             data: {
  29.                 isTrue: true,
  30.                 objActive: {
  31.                     "active": true,
  32.                     "color": true //"-"非法必须使用字符串
  33.                 },
  34.                 arryActive: ['active', 'color'],
  35.                 objAndArray: ['active', { abc: true}]
  36.             }
  37.         });
  38.     </script>
  39. </body>

Style

<body>
    <div id="app">
         <!-- 通过对象+变量拼接 -->
        <div :style="{background:'red',margin:marginWidth+'px'}" style=" width:100px;height: 100px;"></div>
        <!-- 放置对象 -->
        <div :style="styleObj" style=" width:100px;height: 100px;"></div>
        <!-- 放置数组 -->
        <div :style="styleArry" style=" width:100px;height: 100px;"></div>
    </div>

    <script type="text/javascript">
        let app = new Vue({
            el: '#app',
            data: {                
                marginWidth: 10,
                styleObj: {
                    'background-color': 'blue',
                    height: '200px'
                },
                styleArry: [{
                    'background-color': 'blue',
                    height: '200px'
                }, {
                    'margin-top': '30px'
                }]
            }
        });
    </script>
</body>

动态添加style|class

<div
     class="item"
     v-for="(c1, index) in categoryList"
     :key="c1.categoryId"
     >
  <h3
      @mouseenter="changeIndex(index)"
      :class="{ cur: currentIndex === index }"
      >