X
XiaoSong
V1
2023/01/13阅读:21主题:默认主题
模板语法
文本插值
是最基本的数据绑定形式(响应式),使用的是双大括号写法:
<template>
<div>
name: {{ name }}
</div>
</template>
<script setup>
import {ref} from 'vue'
let name = ref('XiaoSong')
</script>
运行效果如下:
原始HTML
若想插入HTML,需要使用v-html
指令
<template>
<div>Using v-html:
<span v-html="rawHtml"></span>
</div>
</template>
<script setup>
import {ref} from 'vue'
let rawHtml = ref('<h1>1<h1/>')
</script>
运行效果如下:
被解析后的span标签中的代码:
<span>
Using v-html:
<h1>1</h1>
</span>
Attribute 绑定
响应式的绑定元素属性:
<template>
<div :class="active">active</div>
</template>
<script setup>
import {ref} from 'vue'
let active = ref('on')
</script>
被解析后的代码
<div class="on">active<div>
特别注意:
这里有用到let active = ref('on')
等类似写法,这是Vue3创建响应式数据的一种形式,后续会讲到。
作者介绍
X
XiaoSong
V1