vue中v-bind用法绑定多个class属性

2018.05.13 16:41 阅读 990

vue中可以用v-bind动态绑定一些属性值,例如在一个组件中的class属性。

字符串

<template>
  <div :class="classes">kkfor.com</div>
</template>
<script>
  export default {
    data() {
      return {
        classes: 'kkfor kkfor1'
      }
    }
  }
</script>

绑定的是字符串,多个属性可以在字符串中添加空格,渲染结果为<div class="kkfor kkfor1">kkfor.com</div>

对象

<template>
  <div :class="classes">kkfor.com</div>
</template>
<script>
  export default {
    data() {
      return {
        classes: {
          kkfor: true,
          kkfor2: false
        }
      }
    }
  }
</script>

绑定的是对象,则对象的键的值为布尔值,为true的键值能够渲染出来,为false的键值不能渲染出来。渲染出的结果是<div class="kkfor">kkfor.com</div>

数组

<template>
  <div :class="classes">kkfor.com</div>
</template>
<script>
  export default {
    data() {
      return {
        classes: ['kkfor', 'kkfor2']
      }
    }
  }
</script>

绑定的是数组,则渲染出来的就是<div class="kkfor kkfor2">kkfor.com</div>

数组中包含对象

<template>
  <div :class="classes">kkfor.com</div>
</template>
<script>
  export default {
    data() {
      return {
        classes: [
          'kkfor',
          {
            'kkfor2': true,
            'kkfor3': false
          },
          {'kkfor4': true}
        ]
      }
    }
  }
</script>

绑定的是数组,但数组中包含对象,像是上面两种形式的组合,对象中为true的键值能够渲染出来,渲染结果为<div class="kkfor kkfor2 kkfor4">kkfor.com</div>