VUE3v-text、v-html、:style的理解

在Vue 3中，v-text、v-html和:style都是常用的指令，用于更新DOM的文本内容、HTML内容和元素的样式。

1. v-text：更新元素的文本内容。

<template>
  <div v-text="message"></div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
}
</script>

2. v-html：更新元素的innerHTML。

<template>
  <div v-html="rawHtml"></div>
</template>
 
<script>
export default {
  data() {
    return {
      rawHtml: '<span style="color: red;">This should be red.</span>'
    }
  }
}
</script>

3. :style：绑定内联样式。

<template>
  <div :style="divStyle">This is a div with dynamic styles.</div>
</template>
 
<script>
export default {
  data() {
    return {
      divStyle: {
        color: 'blue',
        fontSize: '20px'
      }
    }
  }
}
</script>

注意：v-html可以插入HTML，存在安全问题，仅在可信的内容上使用。