04.1vue常见指令:v-text和v-html

• 注:除了插值表达式之外所有的指令都是用是类似属性的方式进行写入

v-text

 使用方式:：v-text='定义好的变量名称'

作用和插值类似，都是为双标签添加展示内容,但是v-text是将指定的属性完全的替换标签之间的内容，而不管标签之间有什么

<div class="text">
   //插值表达式使用:
        <p>{{msg + 'aaa'}}</p>
v-text指令使用:
        <p v-text='msg'>{{name}}</p>
        <!-- 使用细节  -->
//通用和插值表达式一样,所有指令都可以进行简单的拼串,运算,js代码
注意: 拼串的字符要加 "  "
        <p v-text='msg+"你好"'></p>
        <p v-text='msg.toUpperCase()'></p>
        <p v-text='age + 1'></p>
        <p v-text='age>18?"成年":"未成年"'></p>
    </div>

v-html

使用方法 :v-html=' 变量 '

作用：可以解析html结构,既是可以解析字符串内的标签等html写法,并作为网页html结构插入标签内起作用,它只能解析html,js不可以

为了输出真正的 HTML ，你需要使用 v-html 指令：
例如：
<template>
<div v-html="rawHtml"></div>
</template>

<script>
    export default {
        data(){
          return {
            rawHtml:'<h1>hello world</h1>'
        }
      }
})
</script>

ps:  被插入的内容都会被当做 HTML,但是对于没有HTML标签的数据绑定时作用同v-text和{{}}一样

-使用场景：以后可以接收从服务器返回的html结构代码并进行解析，在页面中展示