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 用来遍历元素