一、文本：

在html中通过{{}}（双大括号）中可以把Vue对象中的数据插入到网页中。并且只要Vue对象上对应的值发生改变了，那么html中双大括号中的值也会立马改变。

<script setup name="App">
import { ref } from 'vue'

let username = ref('张三')

function onModifyUsername() {
  username.value = '李四'
}
</script>

<template>
  <p>用户名：{{ username }}</p>
  <button @click="onModifyUsername">修改用户名</button>
</template>

当然，如果在html的{{}}中，第一次渲染完成后，不想要跟着后期数据的更改而更改，那么可以使用v-once指令来实现。示例代码如下：

<p v-once>{{username}}</p>

二、显示原生的HTML

有时候我们的Vue对象中，或者是后台返回给我们一个段原生的html代码，我们需要渲染出来，那么如果直接通过{{}}渲染，会把这个html代码当做字符串。这时候我们就可以通过v-html指令来实现。示例代码如下：

<script setup name="App">
let code = "<h1>欢迎来到知了课堂</h1>"
</script>

<template>
  <div v-html="code"></div>
</template>

三、属性绑定

如果我们想要在html元素的属性上绑定我们Vue对象中的变量，那么需要通过v-bind来实现。比如以下代码是不行的：

<script setup name="App">
let classname = "main"
</script>

<template>
  <div class="classname">粉红色的回忆</div>
</template>

<style scoped>
.main{
  background-color: pink;
}
</style>

需要使用v-bind才能生效：

<template>
  <div v-bind:class="classname">粉红色的回忆</div>
</template>

或者可以把v-bind 省略，仅保留:class 即可：

<template>
  <div :class="classname">粉红色的回忆</div>
</template>

四、使用JavaScript表达式：