一、文本插值

将下述代码替换到App.vue

<script setup>
const msg = 'hello'
const res = true
const num = 10
</script>

<template>
    <!--使用双大括号调用设置的变量，双大括号内可进行简单变量运算-->
    <p>打印初始文本插值：{{msg}}</p>
    <p>打印拼接的文本插值：{{msg + " vue"}}</p>
    <p>打印三元运算后的文本插值：{{res? true:false}}</p>
    <p>打印计算后的文本插值：{{num+5}}</p>

</template>

结果展示：

二、v-html：插入`html`

上述的例子中是对纯文本数据进行插入，而不是html, 如果想要插入html，则需要使用v-html，例如，将下述代码替换至app.vue：

<script setup>
    const htmlData = "<p>hello vue</p>"
</script>

<template>
    <!--插入html文本-->
    <span v-html="htmlData"></span>
</template>

可以使用双花括号去包裹htmlData打印一下看看效果，可以更方便了解该方法跟文本插值的区别

ps：这里插入的html必须是一个文本对象，不能直接插入一个文件对象

三、v-bind: 属性绑定

将下述代码替换到App.vue

<script setup>
    const location = "center"
    const color = "color:red"
</script>

<template>
    <p v-bind:align="location">绑定单个属性</p>
    <p :align="location">属性绑定的简写方式</p>
    <p :align="location" :style="color">绑定多个属性</p>
</template>