vue中style 和:style的区别

在Vue中，使用style和:style都可以给元素添加CSS样式，但它们的使用方式有所不同。

1. style：
在Vue中，可以使用style属性直接给元素添加CSS样式，例如：

<template>
  <div style="color: red;">Hello World!</div>
</template>

这样就可以直接给div元素添加color为red的字体颜色。

2. :style：
在Vue中，:style是一个动态绑定的属性，它可以根据数据来动态设置元素的CSS样式。例如：

<template>
  <div :style="{ color: textColor }">Hello World!</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red'
    }
  }
}
</script>

这样就可以根据data中的textColor属性来动态设置div元素的字体颜色。

总结：
- style属性是静态属性，需要手动编写CSS样式，不支持动态数据绑定。
- :style属性是动态属性，可以根据数据动态设置CSS样式，支持动态数据绑定。