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