Vue入门教程07-Class和Style样式绑定

一、class属性绑定

1、单样式使用：

使用 v-bind:class 可以为元素设置一个样式：

<template>
  <div id="hello">
    <div v-bind:class="{ class1: use }"></div>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        use:true
      }
    }
  }
</script>
<style>
  .class1 {
    width: 200px;
    height: 200px;
    background: green;
  }
</style>

样式效果：

上面程序中,use为true，所以class=class1样式。

2、叠加样式使用：

在上面的案例中，我们叠加一个class2样式，设置被红色背景，并使其生效：

<template>
  <div id="hello">
    <div v-bind:class="{ class1: use, class2:errorTip }"></div>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        use:true,
        errorTip:true
      }
    }
  }
</script>
<style>
  .class1 {
    width: 200px;
    height: 200px;
    background: green;
  }
  .class2 {
    background: red;
  }
</style>

样式效果：

3、样式对象的使用：

上述叠加的样式我们可以还封装到一个calssObject对象中，代码格式更优美：

<template>
  <div id="hello">
    <div v-bind:class="classObject"></div>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        classObject: {
          class1: true,
          class2: true
        }
      }
    }
  }
</script>
<style>
  .class1 {
    width: 200px;
    height: 200px;
    background: green;
  }
  .class2 {
    background: red;
  }
</style>

4、样式数组语法的使用：

也可以把一个数组传给 v-bind:class ：

  //v-bind:class中使用数组格式来引用：
  <div v-bind:class="[c1,c2]"></div>

  //data返回数组格式的样式定义：
  data () {
    return {
      c1:'class1',
      c2:'class2'
    }
  }

二、style(内联样式)

使用 v-bind:style 直接设置样式值：

<template>
  <div id="hello">
    <div v-bind:style="{ color: myColor, fontSize: fontSize + 'px' }">内嵌入的式样使用</div>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        myColor: 'green',
        fontSize: 40
      }
    }
  }
</script>

与上面v-bind:calss一样，v-bind-style也可以使用对象、数组的格式设置style值，下面程序列举一个数组模式的实现：

<template>
  <div id="hello">
    <div v-bind:style="[style1,style2]">内嵌入的式样使用</div>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        style1: {
          color: 'green',
          fontSize: '40px'
        },
        style2: {
          'font-weight': 'bold'
        }
      }
    }
  }
</script>

END.