【前后端】Vue 基本使用方式（下）—— 条件渲染、双向绑定、事件绑定

文章目录

前言
[定义概念 + 缩写](#定义概念 + 缩写)
- [1. 条件渲染（Conditional Rendering）](#1. 条件渲染（Conditional Rendering）)
- [2. 双向绑定（Two-way Binding）](#2. 双向绑定（Two-way Binding）)
- [3. 事件绑定（Event Binding）](#3. 事件绑定（Event Binding）)
性质
使用步骤
- [一、条件渲染（v-if / v-else-if / v-else）](#一、条件渲染（v-if / v-else-if / v-else）)
- - 说明
- 二、双向绑定（v-model）
- - 执行流程
- [三、事件绑定（v-on / @）](#三、事件绑定（v-on / @）)
- - 说明
[Python 代码块示例（保持模板一致）](#Python 代码块示例（保持模板一致）)
[Matlab 示例](#Matlab 示例)
[C 语言代码块](#C 语言代码块)
总结
参考文献

前言

本文继续使用 Vue 3 的基础语法，介绍开发中最常用的三大核心功能：

条件渲染（v-if / v-else-if / v-else）
双向绑定（v-model）
事件绑定（v-on / @）

这些特性是前端模块交互的基础，掌握后即可处理大部分动态页面逻辑。

定义概念 + 缩写

1. 条件渲染（Conditional Rendering）

根据表达式决定是否渲染某段 DOM。

指令包括：

v-if
v-else-if
v-else

特点：只有条件为真，DOM 才会被挂载到页面上。

2. 双向绑定（Two-way Binding）

Vue 中由 v-model 实现，用于：

表单输入项 ↔ data 中的数据
任意一方改变都会同步另一方

用于 <input>、<textarea>、<select> 最多。

3. 事件绑定（Event Binding）

为元素绑定事件的方法，写法：

全写：v-on:click="fn"
简写：@click="fn"（最常用）

常见事件：click、input、change、keyup......

性质

条件渲染的性质

完全移除/创建 DOM，而不是隐藏显示（与 v-show 不同）
适合场景：分支渲染较重的组件/区块
动态表达式可直接判断

双向绑定的性质

表单值变化 ➜ data 数据变化
data 变化 ➜ input 值实时变化
底层由 v-bind:value + @input 组合而成

事件绑定的性质

支持传参：@click="fn(123)"
可与 data/methods 交互
this 指向 Vue 实例（Options API）

使用步骤

一、条件渲染（v-if / v-else-if / v-else）

以下示例来自你的课件截图：

vue 复制代码

<template>
  <div>
    <div v-if="sex == 1">
      男
    </div>

    <div v-else-if="sex == 2">
      女
    </div>

    <div v-else>
      未知
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { sex: 1 }
  }
}
</script>

说明

sex 为 1 → 显示"男"
sex 为 2 → 显示"女"
其他 → "未知"

这是用户信息展示、身份状态等场景中最常用的逻辑分支。

二、双向绑定（v-model）

课程截图中的示例：

vue 复制代码

<template>
  <div>
    <div>
      双向绑定：{{ name }}
      <input type="text" v-model="name" />
      <input type="button" value="改变" @click="handleChange"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { name: '张三' }
  },
  methods: {
    handleChange() {
      this.name = '李四'
    }
  }
}
</script>

执行流程

输入框改变 → name 自动变
点击按钮 → name 变成 "李四"
双向绑定展示 → 自动更新页面

三、事件绑定（v-on / @）

来自第三张截图：

vue 复制代码

<template>
  <div>
    <div>
      <input type="button" value="保存" v-on:click="handleSave" />
      <input type="button" value="保存" @click="handleSave" /><br>
    </div>
  </div>
</template>

<script>
export default {
  data() { 
    return { name: '张三' }
  },
  methods: {
    handleSave() {
      alert(this.name)
    }
  }
}
</script>

说明

两个按钮效果完全一致
推荐使用 @click 更简洁
this 始终指向 Vue 实例

Python 代码块示例（保持模板一致）

python 复制代码

def show_gender(sex):
    return "男" if sex == 1 else "女" if sex == 2 else "未知"

print(show_gender(1))

Matlab 示例

matlab 复制代码

sex = 1;
if sex == 1
    disp("男");
elseif sex == 2
    disp("女");
else
    disp("未知");
end

C 语言代码块

c 复制代码

int sex = 1;
printf("%s", sex == 1 ? "男" : (sex == 2 ? "女" : "未知"));

总结

本文介绍了 Vue 中三个最核心的页面交互基础：

功能	指令	用途
条件渲染	v-if / v-else-if / v-else	根据条件动态渲染 DOM
双向绑定	v-model	表单与数据同步
事件绑定	v-on / @	绑定事件，响应用户操作

掌握这些后，你已经能编写基础的交互型页面。

推荐下一篇学习内容：

列表渲染：v-for
计算属性：computed
侦听器：watch

如果你愿意，我可以继续写下一篇：

《Vue 基本使用方式（下）------ 列表渲染 v-for 与 key 的作用》

参考文献

$1$ Vue 官方文档：https://vuejs.org/