Vue3中的模板语法和vue指令怎么使用

时间：2023-05-18 23:36

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</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指令怎么使用的详细内容，更多请关注Gxl网其它相关文章！