1 模板插值语法
- 在script 声明一个变量可以直接在template 使用用法为{{变量名称}}
- 模板语法是可以编写条件运算的
- 运算也是支持的
- 操作API 也是支持的
<template>
{{ message }}
{{ message2==0 ? '我是老大' : '我笑的' }}
{{ message2 1 }}
{{ message.split('').map(v => `4546$v`) }}
</template>
<script setup lang="ts">
const message = "我是唐少"
const message2:number = 1
</script>
<style>
</style>2 指令
- v- 开头都是vue 的指令
- v-text 用来显示文本
- v-html 用来展示富文本
- v-if 用来控制元素的显示隐藏（切换真假DOM）
- v-else-if 表示 v-if 的“else if 块”。可以链式调用
- v-else v-if条件收尾语句
- v-show 用来控制元素的显示隐藏（display none block Css切换）
- v-on 简写@ 用来给元素添加事件
- v-bind 简写: 用来绑定元素的属性Attr
- v-model 双向绑定
- v-for 用来遍历元素
v-on修饰符
冒泡案例：
<template>
<div @click="parent">parent
<div @click.stop="child">child</div>
</div>
</template>
<script setup lang="ts">
const child = () => {
console.log('child');
// 点击后不会答应parent，因为被阻止了
}
const parent = () => {
console.log('parent');
}
</script>阻止表单提交案例：
<template>
<form action="/">
<button @click.prevent="submit" type="submit">submit</button>
</form>
</template>
<script setup lang="ts">
const submit = () => {
console.log('child');
}
</script>
<style>
</style>v-bind 绑定class 案例 1：
<template>
<div :class="[flag ? 'active' : 'other', 'h']">456789</div>
</template>
<script setup lang="ts">
const flag: boolean = false;// 改成true后切换不同的效果
</script>
<style>
.active {
color: red;
}
.other {
color: blue;
}
.h {
height: 300px;
border: 1px solid #ccc;
}
</style>v-bind 绑定class 案例 2：
<template>
<div :class="flag">{{flag}}</div>
</template>
// 直接绑定cls
<script setup lang="ts">
type Cls = {
other: boolean,
h: boolean
}
const flag: Cls = {
other: false,
h: true
};
</script>
<style>
.active {
color: red;
}
.other {
color: blue;
}
.h {
height: 300px;
border: 1px solid #ccc;
}
</style>v-bind 绑定style案例：
<template>
<div :style="style">绑定style</div>
</template>
<script setup lang="ts">
type Style = {
height: string,
color: string
}
const style: Style = {
height: "300px",
color: "blue"
}
</script>
<style>
</style>v-model 案例：
<template>
<input v-model="message" type="text" />
<div>{{ message }}</div>
</template>
<script setup lang="ts">
import { ref } from 'vue' // 实时监听
const message = ref("message")
</script>
<style>
.active {
color: red;
}
.other {
color: blue;
}
.h {
height: 300px;
border: 1px solid #ccc;
}
</style>到此这篇关于Vue3中的模板语法和vue指令的文章就介绍到这了,更多相关vue3模板语法和vue指令内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！