Vue指令

Vue根据不同的指令，针对标签实现不同的功能。

指令：带有v-前缀的特殊标签属性

1、v-html

• 作用：设置元素的 innerHTML

• 语法：v-html = “表达式”

• 代码演示

<script setup lang="ts">
let title = "<a>Hello, Vue</a>"
</script>

<template>
<div v-html="title"></div>
</template>

<style scoped></style>

• 如果不用 v-html，用插值表达式 {{title}}，会显示所有 title 的内容
  例如：

<script setup lang="ts">
let title = '<a>Hello, Vue</a>'
</script>

<template>
  <div>{{ title }}</div>
</template>

<style scoped></style>

2、v-show vs v-if

2.1 v-show

• 作用：控制元素显示或隐藏
• 语法：v-show = “表达式”，表达式值 true 显示，false 隐藏
• 底层原理：切换 css 的 display: none 来控制显示还是隐藏，
• 场景：适合频繁切换显示的场景

2.2 v-if

• 作用：控制元素显示或隐藏（条件渲染）
• 语法：v-if = “表达式”，表达式值true显示，false隐藏
• 底层原理：根据判断条件，控制元素的创建和移除（条件渲染）
• 场景：要么显示，要么隐藏，不频繁切换的场景

2.3 二者比较

• 代码：

<script setup lang="ts">
let displays = true
</script>

<template>
<div>
	<div v-show="dispalys">我是一个v-show控制盒</div>
	<div v-if="dispalys">我是一个v-if控制盒子</div>
</div>
</template>

<style scoped></style>

• 当表达式的值是 true，二者没有明显区别
  
• 当表达式的值是 false 时，可以看出二者的明显区别
  

3、v-else vs v-else-if

二者搭配 v-if 一起使用

3.1 v-else

• 作用：兜底分支，前面所有条件都不满足时才执行，不需要写判断条件

• 语法：v-else

• 注意：v-else 前面必须有 v-if 或者 v-else-if，不带任何条件，只能写一个

• 代码：

<script setup lang="ts">
import {ref} from 'vue'
let gender = ref(1)
</script>
<template>
  <div>
    <p v-if="gender === 2">性别：男</p>
    <p v-else>性别：女</p>
  </div>
</template>
<style scoped></style>

3.2 v-else-if

• 作用：多条件分支，在 v-if 不满足时，继续判断下一个条件

• 语法：v-else-if = “表达式”

• 注意：v-else-if 必须跟在 v-if 后面，可以写多个（v-if 可以匹配多个 v-else-if，只能匹配一个 v-else）

• 例如：

<script setup lang="ts">
import { ref } from 'vue'
let gender = ref(1)
let score = ref(90)
</script>

<template>
  <div>
    <p v-if="gender === 2">性别：男</p>
    <p v-else>性别：女</p>
    <hr />
    <p v-if="score >= 90">成绩优秀</p>
    <p v-else-if="score >= 80">成绩良好</p>
    <p v-else-if="score >= 60">成绩合格</p>
    <p v-else>成绩不合格</p>
  </div>
</template>

<style scoped></style>

4、v-on

• 作用：注册事件 = 添加监听 + 提供处理逻辑

• 语法：

  • v-on : 事件名 = “内联语句” 内联语句：可执行代码
  • v-on : 事件名 = “methods中的函数名”

• 例如：v-on : 事件名 = “内联语句”

  • 要求：动态渲染一个数字，点击左边按钮 -1 ，点击右边按钮 +1
    
  • 代码：给 ‘+’,’ -’ 注册 点击 事件

<script setup lang="ts">
import {ref} from 'vue'
let count = ref(100)
</script>

<template>
  <div>
    <button v-on:click="count--">-</button>
    <span>{{count}}</span>
    <button v-on:click="count++">+</button>
  </div>
</template>

<style scoped></style>

点击 +2

更换成其他事件：v-on:mouseenter 鼠标移动到按钮就做加减

为了简化书写：v-on:，可以简化成@，@事件名

• 例如：v-on:事件名 = “函数名”

  • 需求：点击按钮隐藏内容。使用到 v-on 和 v-show
    
  • 实现:

<script setup lang="ts">
import { ref } from 'vue'
let text =ref(true)
function showInfo() {
  text.value = !text.value
}
</script>

<template>
  <div>
    <button @click="showInfo">切换显示隐藏</button>
    <h1 v-show="text">Hello, Vue.js</h1>
  </div>
</template>

<style scoped></style>

• 函数调用传参

  • 需求：点击价格按钮，点击后余额自动更新
    

  • 实现：

<script setup lang="ts">
import { ref } from 'vue'
let money = ref(100)
function buy(price) {
  money.value -= price
}`在这里插入代码片`
</script>

<template>
  <div>
    <h1>自动售货机</h1>
    <button @click="buy(5)">可乐5元</button>
    <button @click="buy(10)">咖啡10元</button>
    <h2>银行卡余额：{{money}}</h2>
  </div>
</template>

<style scoped></style>

5、v-bind

• 作用：动态的设置 html 的标签属性，图片地址：src，悬浮提示文字：title

• 语法：v-bind : 属性名 = “表达式”

• 简写：:属性名 ，省略 v-bind

• 例如：

<script setup lang="ts">
import { ref } from 'vue'
let img = ref("/imgs/1.jpg")
let title1 = ref("这是标题")
</script>

<template>
  <div>
    <img :src="img" :title="title1"></img>
  </div>
</template>

<style scoped></style>

6、v-for

• 作用：基于数据循环，多次渲染整个元素 ==> 数组、对象、数字
• 语法：v-for = “(item,index) in 数组” ，item 每一项 ，index 下标
• 例如：

<script setup lang="ts">
import {ref} from 'vue'
let arr = ref(['西瓜','苹果','桃子'])

</script>

<template>
<div>
  <h1>水果店</h1>
  <ul>
    <li v-for="(item,index) in arr">{{item}} - {{index}}</li>
  </ul>
  <ul>
    <li v-for="item in arr">{{item}}</li>
  </ul>
</div>
</template>

<style scoped></style>

• v-for 中的 kry
  • 语法：key 属性 = “唯一标识”
  • 作用：给列表项添加的唯一标识，便于 Vue 进行列表项的正确排序复用。
    

7、v-model

• 作用：给 表单运算 使用，双向数据绑定，可以快速获取或设置表单元素内容。
  • 数据变化 ----> 视图自动更新
  • 视图变化 ----> 数据自动更新
• 语法：v-model = “变量名”
• 例如：

<script setup lang="ts">
import { ref } from 'vue'
let name = ref('')
let pass = ref('')
</script>

<template>
  <div>
    用户: <input v-model="name" type="text" /> 密码： <input v-model="pass" type="password" />
  </div>
</template>

<style scoped></style>