VUE-vue指令

原文链接：https://blog.csdn.net/qq1195566313/article/details/122773486

模版语法

声明变量在 template 直接使用

<template>
  <div>{{message}}</div>
</template>
 
 
<script setup lang="ts">
const message = "我是小满"
</script>
 
<style>
</style>

编写条件运算

<template>
  <div>{{message == 0 ? '早上好中国' : '我爱吃冰淇淋'}}</div>
</template>
 
 
<script setup lang="ts">
const message:number = 1
</script>
 
<style>
</style>

运算也支持

<template>
  <div>{{message  + 1}}</div>
</template>
 
 
<script setup lang="ts">
const message:number = 1
</script>
 
<style>
</style>

操作 API

<template>
  <div>{{message.split('，') }}</div>
</template>
 
 
<script setup lang="ts">
const message:string = "我，是，小，满"
</script>
 
<style>
</style>

vue 指令

v- 开头都是 vue 的指令

v-text

v-text 用来显示文本

<template>
  <div v-text="message"></div>
</template>
 
 
<script setup lang="ts">
const message:string = "数, 组, 排, 列"
</script>
 

<style>
</style>

v-html

v-html 用来展示富文本

v-if

v-if 用来控制元素的显示隐藏（切换真假 DOM）

<template>
  <div v-if="flag">{{message}}</div>
</template>
<script>
const message: string = "hello world"
const flag: boolean = true
</script>

v-else

v-else-if 表示 v-if 的“else if 块”。可以链式调用

v-else v-if 条件收尾语句

<template>
  <div @click.stop="child">child</div>
  <div v-if="type=='A'">A</div>
  <div v-else-if="type=='B'">B</div>
  <div v-else-if="type=='C'">C</div>
  <div v-else="type=='D'">D</div>
</template>
<script>
const type: string = "A"
</script>

v-show

v-show 用来控制元素的显示隐藏（display none block Css 切换）

<template>
  <div v-show="flag">{{message}}</div>
</template>
<script>
const message: string = "hello world"
const flag: boolean = true
</script>

v-on

v-on 简写 @ 用来给元素添加事件

<template>
  <div>
   <button v-on:click="clickTap">111</button>
  </div>
</template>
<script>
  const clickTap = () => {console.log('触发了点击事件')
  }
</script>

v-on 修饰符 冒泡案例

<template>
  <div @click="parent">
    <div @click.stop="child">child</div>
  </div>
</template>
 
 
<script setup lang="ts">
const child = () => {console.log('child');
 
}
const parent = () => {console.log('parent');
}
 
</script>

v-on 阻止表单提交案例

<script>
  const submit = () => {console.log('child');
  }
</script>
<template>
  <form action="/">
    <button @click.prevent="submit" type="submit">submit</button>
  </form>
</template>

v-bind

v-bind 简写: 用来绑定元素的属性 Attr

案例 1:

<template>
  <div :class="[flag ?'active':'other','h']">12323</div>
</template>
 
 
<script setup lang="ts">
const flag: boolean = false;
</script>
 
 
 
<style>
.active {color: red;}
.other {color: blue;}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

案例 2:

<template>
  <div :class="flag">{{flag}}</div>
</template>
 
 
<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-model

v-model 双向绑定

v-for 用来遍历元素

v-on 修饰符 冒泡案例