vue3基础指令和渲染

一、指令

vue指令是v-前缀的特殊属性，下面是vue3的指令的简单介绍跟实例。

1.v-text指令

v-text主要用来更新textContent，可以等同于JS的text属性。``代码如下（示例）：

全写：<span v-text="msg"></span>
简写：<span>{
   {
   msg}}</span>

2.v-html指令

双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。代码如下（示例）：

<div v-html="rawHtml"></div>

这个div的内容将会替换成属性值rawHtml，直接作为HTML进行渲染。

3.v-if指令

v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。代码如下（示例）：

<a v-if="ok">yes</a>

如果属性值ok为true，则显示。否则，不会渲染这个元素。。

4.v-else指令

v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。代码如下（示例）：

<a v-if="ok">yes</a>
<a v-else>No</a>

。

5.v-else-if指令

v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。代码如下（示例）：

<div v-if="type==='A'">
    A
</div>
<div v-else-if="type==='B'">
    B
<