文本插值

是最基本的数据绑定形式(响应式)，使用的是双大括号写法:

<template>
    <div>
        name: {{ name }}
    </div>
</template>

<script setup>
import {ref} from 'vue'
let name = ref('XiaoSong')
</script>

运行效果如下:

原始HTML

若想插入HTML，需要使用v-html指令

<template>
    <div>Using v-html：
      <span v-html="rawHtml"></span>
    </div>
</template>

<script setup>
import {ref} from 'vue'
let rawHtml = ref('<h1>1<h1/>')
</script>

运行效果如下:

被解析后的span标签中的代码:

<span>
  Using v-html：
  <h1>1</h1>
</span>

Attribute 绑定

响应式的绑定元素属性:

<template>
    <div :class="active">active</div>
</template>

<script setup>
import {ref} from 'vue'
let active = ref('on')
</script>

被解析后的代码

<div class="on">active<div>

特别注意:

这里有用到let active = ref('on')等类似写法，这是Vue3创建响应式数据的一种形式，后续会讲到。