v-bind(:) 对样式控制<class/style>

v-bind( 对样式控制的增强

1. 对class增强:

语法:

:class="对象/数组"

如:详见 3. 案例说明

  • 对象的方式(适用场景:一个类名,来回切换)
<div class="box":class="{ 类名1:布尔值,类名2:布尔值 }"></div>
<div class="box":class="对象名"></div>
  • 数组的方式(适用场景:批量添加或删除样式类)
<div class="box" :class="[ 类名1, 类名2,类名3 ]"></div>
<div class="box" :class="数组名称"></div>

2. 对style增强:

语法:

style="样式对象"

如:详见 3. 案例说明

<div class="box":style="{CSS属性名1:CSS属性值,CSS属性名2:CSS属性值 }"></div>
<div class="box":style="对象名"></div>

3. 案例说明:

  • class 案例:
<body>

  <div id="app">
    <!-- 数组形式 -->
    <div class="box" :class="divclassArr">数组形式</div>
    <!-- 对象形式 -->
    <div class="box" :class="divclassObj">对象形式</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- <script src=" ./vue.js"> -->
  </script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        divclassArr: ['pink', 'big'], // 数组样式管理
        divclassObj: { // 对象样式管理
          pink: true,
          big: false
        }

      }
    })
  </script>
  • style 案例:
<div id="app">
    <!-- style控制 -->
    <div class="box" :style="{width:'100px',height:'100px'}"></div>
</div>

你好

你可能感兴趣的:(Vue,javascript,前端,vue.js)