vue模版语法（Vue3系列3–模板语法和vue指令）
导读：1 模板插值语法 在script 声明一个变量可以直接在template 使用用法为{{变量名称}} 模板语法是可以编写条件运算的 运算也是支持的 操作API 也是支持的...
1 模板插值语法
在script 声明一个变量可以直接在template 使用用法为{{变量名称}} 模板语法是可以编写条件运算的 运算也是支持的 操作API 也是支持的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>
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！