一、文本：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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指令来实现。示例代码如下：

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

二、显示原生的HTML

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

1
2
3
4
5
6
7
<script setup name="App">
  let code = "<h1>欢迎来到知了课堂</h1>"
</script>

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

三、属性绑定

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script setup name="App">
  let classname = "main"
</script>

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

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

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

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

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

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

四、使用JavaScript表达式：

在使用了v-bind，或者{{}}的语法中。我们还可以执行一个JavaScript表达式。示例代码如下：

1
2
3
4
5
6
7
<script setup name="App">
  let temp = 19;
</script>

<template>
  <div>{{ temp>18?'出去玩':'回家睡觉' }}</div>
</template>

注意，只能是JavaScript表达式，不能是语句，比如var a=1;a=2;这样的是js语句，不是表达式了。

五、条件判断：

在模板中，可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的。示例代码如下：

1
2
3
4
5
6
7
8
9
<script setup name="App">
  let weather = 'sun';
</script>

<template>
  <p v-if="weather == 'sun'">今天去公园玩！</p>
  <p v-else-if="weather == 'rain'">今天去看电影！</p>
  <p v-else>今天哪儿也不去！</p>
</template>

六、v-show和v-if：

v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。 一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。