一、文本插值
将下述代码替换到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或简写方式进行绑定 - 绑定不仅仅支持调用变量，也可以是一个函数
