lovecoding
/
VIP20


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
							<!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>
    <script src="../../vue.js"></script>
    <style>
      /* 激活样式 */
      .active {
        color: #556b2f;
        font-size: 18px;
      }
      /* 异常样式 */
      .error {
        color: #b22222;
      }

      .common {
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- v-bind指令 -可以动态绑定html元素属性- v-bind:attrName="js表达式" -->
      <!-- 样式处理：class & style -->
      <p class="common" v-bind:class="{active: isActive, error: true}">
        对象语法绑定class： 动态绑定的样式类名 会和 静态绑定的类名 合并。而不是
        覆盖
      </p>
      <p v-bind:class="['common', 'active']">数组语法绑定class：</p>
      <p v-bind:class="['common', {active: isActive}]">
        数组语法中 混合使用 对象语法
      </p>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          isActive: false,
        },
      });
    </script>
  </body>
</html>