vue中Class 与 Style 绑定

1.：class

1.1.常规用法

 :class="color"

这里的color是数据里面的一个数据

<template>
  <div :class="color">
    数组用法
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        color: 'red'
      }
    }
  }
</script>
<style scoped>
  .red{
    color: red;
  }

</style>

渲染为：

<div  class="red">
  数组用法
</div>

1.2 绑定数组用法

:class="[bg,color]

适用于绑定对个样式的时候，数组里面的每一个值都代表一个样式，每一个值都来源于data，而data对应的则是CSS定义的样式

<template>
  <div :class="[bg,color]">
    数组用法
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        color: 'red',
        bg: 'green'
      }
    }
  }
</script>
<style scoped>
  .red{
    color: red;
  }
  .green{
    background-color: green;
  }

</style>

渲染结果为：

<div  class="green red">
  数组用法
</div>

1.3 绑定对象用法

1.3.1 直接绑定true or  false

:class="{red:true,green:false

直接绑定布尔值，那么样式绑定为真的那一样式，上述绑定上的就是class="red"

<template>
  <div :class="{red:true,green:false}">
    数组用法
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld'
</script>
<style scoped>
  .red{
    color: red;
  }
  .green{
    background-color: green;
  }

</style>

渲染为：

<div class="red">
  数组用法
</div>

1.3.2 绑定键值对

:class="{red:color,green:bg}"

在数组里面给对象的值进行赋值，color为真则显示red这个样式

<template>
  <div :class="{red:color,green:bg}">
    数组用法
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        color: true,
        bg: false
      }
    }
  }
</script>
<style scoped>
  .red{
    color: red;
  }
  .green{
    background-color: green;
  }

</style>

渲染为：

<div class="red">
  数组用法
</div>

1.3.3 绑定一个变量，便里面进行赋值（其实回归到1的用法）

<template>
  <div :class="json">
    数组用法
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        json: {
          red: false,
          green: true
          }
      }
    }
  }
</script>
<style scoped>
  .red{
    color: red;
  }
  .green{
    background-color: green;
  }

</style>

最后渲染为

<div class="green">
  数组用法
</div>

2. ：style用法 内联样式的绑定

2.1 直接绑定

:style="{color:'red'}"

直接绑定上属性及其属性的值

<template>
  <div :style="{color:'red'}">
    数组用法
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        json: {
          red: false,
          green: true
          }
      }
    }
  }
</script>
<style scoped>
  .red{
    color: red;
  }
  .green{
    background-color: green;
  }

</style>

渲染为：

<div class="" style="color: red;">
  数组用法
</div>

2.2  数组  绑定一个或者多个值

:style="[a]"

<template>
  <div :style="[a]">
    数组用法
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        a: {color: 'red'}
      }
    }
  }
</script>
<style scoped>

</style>

渲染为：

<div style="color: red;">
  数组用法
</div>

绑定多个值

:style="[a,b]"

<template>
  <div :style="[a,b]">
    数组用法
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        a: {color: 'red'},
        b: {backgroundColor: 'blue'}
      }
    }
  }
</script>
<style scoped>

  }

</style>

渲染为

<div style="color: red; background-color: blue;">
  数组用法
</div>

注意：绑定内联样式的时候遇到复合样式需要改为驼峰法命名background-color需要改为 backgroundColor

2.3 直接绑定一个变量

:style="a"

<template>
  <div :style="a">
    数组用法
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        a: {
          color: 'red',
          backgroundColor: 'blue'
        }
      }
    }
  }
</script>
<style scoped>
 
</style>

渲染为：

<div  style="color: red; background-color: blue;">
  数组用法
</div>

多重值

2.3.0+

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

请使用手机"扫一扫"x