vue中v-bind绑定style属性设置内联样式

2018.05.17 11:05 阅读 743 评论 0

vue组件中v-bind可以绑定style属性,设置元素的内联样式。

1.绑定对象

<template>
  <div :style="{color: 'red', width: '23px'}">kkfor.com</div>
</template>
<script>
export default {

}
</script>

style中可以绑定对象,设置属性值,渲染后为<div style="color: red; width: 23px;">kkfor.com</div>

注: 当style中绑定的是对象,对象的键值必须是标准命名,当遇到-的时候,可以转换为驼峰命名,也可以加引号

<template>
  <div :style="{fontSize: '16px', 'padding-top': '20px'}">kkfor.com</div>
</template>
<script>
export default {

}
</script>

渲染后为<div style="font-size: 16px; padding-top: 20px;">kkfor.com</div>

绑定data中的对象同样的道理

<template>
  <div :style="styles">kkfor.com</div>
</template>
<script>
export default {
  data() {
    return {
      styles: {
        color: 'red',
        fontSize: '16px',
        'padding-top': '20px'
      }
    }
  }
}
</script>

2.绑定数组

<template>
  <div :style="styles">kkfor.com</div>
</template>
<script>
export default {
  data() {
    return {
      styles: [
        {
          color: 'red',
        },
        {
          fontSize: '16px',
          'padding-top': '20px'
        }
      ]
    }
  }
}
</script>

绑定数组时,数组中可以放多个样式的对象,数组中的数据都会被渲染到页面上,渲染后为<div style="color: red; font-size: 16px; padding-top: 20px;">kkfor.com</div>

0 条评论
发布