vue3.0 模板语法
文章目录
- 前言：
- 1. 内容渲染指令
-
- 1.1 v-text
- 1.2 {{ }}插值表达式
- 1.3 v-html
- 2. 双向绑定指令
-
- 2.1 v-model
- 2.2 v-model的修饰符
- 3. 属性绑定指令
-
- 3.1 动态绑定多个属性值
- 3.2 绑定class和style属性
- 4.条件渲染指令
-
- 4.1 v-if、v-else-if、v-else
- 4.2 v-show
- 4.3 v-if与v-show的区别
- 5. 事件绑定指令
-
- 5.1 事件修饰符
- 6. 列表渲染指令
-
- 6.1 v-for渲染数组
- 6.2 v-for渲染对象
- 6.2 通过 key 管理状态
- 总结
前言：
- Vue 使用一种基于
HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上
1. 内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容
1.1 v-text
使用v-text指令，将数据采用纯文本方式填充其空元素中
<script setup>
import { reactive } from 'vue'
let student = reactive({
name: 'Jack',
desc: '我是来自中国的小朋友！
'
})
</script>
<template>
<!-- 使用v-text指令，将数据采用纯文本方式填充其空元素中 -->
<div v-text="student.name"></div>
<!-- v-text：以纯文本的方式显示数据 -->
<div v-text="student.desc"></div>
<!-- 下面的代码会报错：div 元素不是空元素 -->
<!-- <div v-text="student.name">这是原始的div数据</div> -->
</template>
1.2 {{ }}插值表达式
在元素中的某一位置采用纯文本的方式渲染数据
<script setup>
import { reactive } from 'vue'
let student = reactive({
name: 'Jack',
desc: '我是来自中国的小朋友！
'
})
</script>
<template>
<!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->
<div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div>
</template>
1.3 v-html
使用v-html指令，将数据采用HTML语法填充其空元素中
<script setup>
import { reactive } from 'vue'
let student = reactive({
name: 'Jack',
desc: '我是来自中国的小朋友！
'
})
</script>
<template>
<!-- 使用v-html指令，将数据采用HTML语法填充其空元素中 -->
<div v-html="student.name"></div>
<!-- v-html：以 HTML 语法显示数据 -->
<div v-html="student.desc"></div>
<!-- 下面的代码会报错：div 元素不是空元素 -->
<!-- <div v-html="student.name">这是原始的div数据</div> -->
</template>
2. 双向绑定指令
2.1 v-model
v-model双向数据绑定指令，视图数据和数据源同步
一般情况下v-model指令用在表单元素中：
1. 文本类型的和