一、文本插值

将下述代码替换到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>

• 所有属性均可以使用v-bind或简写方式进行绑定
• 绑定不仅仅支持调用变量，也可以是一个函数