15 使用v-model绑定单选框
概述
使用v-model绑定单选框也比较常见，比如性别，要么是男，要么是女。比如单选题，给出多个选择，但是只能选择其中的一个。
在本节课中，我们演示一下这两种常见的用法。
基本用法
我们创建src/components/Demo15.vue，在这个组件中，我们要：
- 1：定义answer响应式变量表示答案
- 2：定义gender变量表示性别
- 3：定义一组单选框，用于选择性别
- 4：定义一组单选框，用于选择答案
- 5：使用两个h3标签，一个用来显示性别，一个用来显示答案
代码如下：
<script setup>
import {ref} from "vue";const answer = ref("A")
const gender = ref("男")</script>
<template><div><h3>性别：{{ gender }}</h3><h3>答案：{{ answer }}</h3></div><div><h3>请选择性别</h3><input type="radio" v-model="gender" value="男"> 男<input type="radio" v-model="gender" value="女"> 女</div><div><h3>请选择答案</h3><input type="radio" v-model="answer" value="A"> A<input type="radio" v-model="answer" value="B"> B<input type="radio" v-model="answer" value="C"> C<input type="radio" v-model="answer" value="D"> D</div>
</template>
接着，我们修改src/App.vue，引入Demo15.vue并进行渲染：
<script setup>
import Demo from "./components/Demo15.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>
然后，我们浏览器访问：http://localhost:5173/
完整代码
package.json
{"name": "hello","private": true,"version": "0.1.0","type": "module","scripts": {"dev": "vite","build": "vite build"},"dependencies": {"vue": "^3.3.8"},"devDependencies": {"@vitejs/plugin-vue": "^4.5.0","vite": "^5.0.0"}
}
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],
})
index.html
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>
src/main.js
import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')
src/App.vue
<script setup>
import Demo from "./components/Demo15.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>
src/components/Demo15.vue
<script setup>
import {ref} from "vue";const answer = ref("A")
const gender = ref("男")</script>
<template><div><h3>性别：{{ gender }}</h3><h3>答案：{{ answer }}</h3></div><div><h3>请选择性别</h3><input type="radio" v-model="gender" value="男"> 男<input type="radio" v-model="gender" value="女"> 女</div><div><h3>请选择答案</h3><input type="radio" v-model="answer" value="A"> A<input type="radio" v-model="answer" value="B"> B<input type="radio" v-model="answer" value="C"> C<input type="radio" v-model="answer" value="D"> D</div>
</template>
启动方式
yarn
yarn dev
浏览器访问：http://localhost:5173/
相关文章：
15 使用v-model绑定单选框
概述 使用v-model绑定单选框也比较常见，比如性别，要么是男，要么是女。比如单选题，给出多个选择，但是只能选择其中的一个。 在本节课中，我们演示一下这两种常见的用法。 基本用法 我们创建src/component…...
go语言指针变量定义及说明
go语言指针主要需要记住两个特殊符号， 一个是 & 用来获取变量对应的内存地址 另一个是 * 用来获取指针对应的变量值 下面是个最简单的go语言指针说明 package mainimport "fmt"//指针为内存地址func main() {var a string "指针对应的变量&…...
基于“Galera+MariaDB”搭建多主数据库集群的实例
1、什么是多主数据库集群 多主数据库集群是一种数据库集群架构，每个节点都可以接收写入操作和读取操作，并且通过心跳机制同步数据，保证数据一致性和高可用性。因多主数据库集群每个节点都可以承担读写操作，因此它可以充分利用各个…...
arcgis javascript api4.x加载天地图cgs2000坐标系
需求：arcgis javascript api4.x加载天地图cgs2000坐标系 效果： 示例代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"wid…...
算法学习——回溯算法
回溯算法 理论基础回溯法的效率回溯法解决的问题回溯法模板 组合思路回溯法三部曲 代码 组合（优化）组合总和III思路代码 电话号码的字母组合思路回溯法来解决n个for循环的问题回溯三部曲代码 组合总和思路代码 组合总和II思路代码 理论基础 什么是回溯法…...
C语言—小小圣诞树
这个代码会询问用户输入圣诞树的高度，然后根据输入的高度在控制台上显示相应高度的圣诞树。 #include <stdio.h>int main() {int height, spaces, stars;printf("请输入圣诞树的高度: ");scanf("%d", &height);spaces height - 1;st…...
Android消息公告上下滚动切换轮播实现
自定义控件 通过继承TextSwitcher实现 直接上代码 public class NoticesSwitcher extends TextSwitcher implements ViewSwitcher.ViewFactory {private Context mContext;private List<Notice> mData;private final long DEFAULT_TIME_SWITCH_INTERVAL 1000;//1spri…...
tensorflow入门 自定义模型
前面说了自定义的层，接下来自定义模型，我们以下图为例子 这个模型没啥意义，单纯是为了写代码实现这个模型 首先呢，我们看有几个部分，dense不需要我们实现了，我们就实现Res，为了实现那个*3,我们…...
虚拟机启动 I/O error in “xfs_read_agi+0x95“
1.在选择系统界面按e 进入维护模式 2.找到ro把ro改成 rw init/sysroot/bin/sh 然后按Ctrlx 3.找到坏掉的分区，以nvme0n1p3为例进行修复 xfs_repair -d /dev/nvme0n1p3 4.init 6 重新启动 以下情况 先umount 再修复 则修复成功...
【MYSQL】-库的操作
💖作者：小树苗渴望变成参天大树🎈 🎉作者宣言：认真写好每一篇博客💤 🎊作者gitee:gitee✨ 💞作者专栏：C语言,数据结构初阶,Linux,C 动态规划算法🎄 如 果 你 …...
网络协议小记
一、TCP/IP协议 作为一个小萌新，当然我无法将tcp/ip协议的大部分江山和盘托出，但是其中很多面试可能问到的知识，我觉得有必要总结一下！ 首先，在学习tcp/ip协议之前，我们必须搞明白什么是tcp/ip协议。 1、…...
STM32-I2C通讯-AHT20温湿度检测
非常感谢，提供的视频学习 https://www.bilibili.com/video/BV1QN411D7ak/?spm_id_from333.788&vd_source8ca4826038edd44bb618801808a5e076 该文章注意：串口显示中文会乱码，必须选用支持ASCII的串口助手，才能正常显示中文。…...
【机器学习】043_准确率、精确率、召回率
一、定义 在处理偏斜数据集时，通常使用不同的误差度量，而不仅仅是使用分类误差来衡量算法性能。 1. 混淆矩阵的概念 二分类问题的混淆矩阵为2X2矩阵，由四部分组成： 假阴性（FN）：模型预测为负…...
【Qt开发流程】之文件目录、文件、输入和输出
概述 应用程序操作过程中，经常要对设备或文件进行读或者写操作。也会经常对文件及目录进行操作。 在Qt中，QIODevice类是Qt中所有进行I/O操作的设备的基类，比如QFile、 QIODevice为支持数据块读写的设备（如QFile、QBuffer和QTcpSo…...
CSS的基本选择器及高级选择器（附详细示例以及效果图）
Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍HTML中CSS的基础选择及高级选择器（详解）以及部分理论知识 🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍉博主收将持续更新学习记录获…...
股票价格预测 | Python实现基于Stacked-LSTM的股票预测模型，可预测未来（keras）
文章目录 效果一览文章概述模型描述源码设计效果一览 文章概述 以股票价格预测为例，基于Stacked-LSTM的股票预测模型（keras），可预测未来。 模型描述 LSTM 用于处理序列数据，如时间序列、文本和音频。相对于传统的RNN，LSTM更擅长捕获长期依赖关系，...
数据可视化---离群值展示
内容导航 类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统…...
LeetCode Hot100 51.N皇后
题目： 按照国际象棋的规则，皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上，并且使皇后彼此之间不能相互攻击。 给你一个整数 n ，返回所有不同的 n 皇后问题 的…...
机器学习 | 贝叶斯方法
不同于KNN最近邻算法的空间思维，线性算法的线性思维，决策树算法的树状思维，神经网络的网状思维，SVM的升维思维。 贝叶斯方法强调的是 先后的因果思维。 监督式模型分为判别式模型和生成式模型。 判别模型和生成模型的区别…...
缓存的定义及重要知识点
文章目录 缓存的意义缓存的定义缓存原理缓存的基本思想缓存的优势缓存的代价 缓存的重要知识点 缓存的意义 在互联网高访问量的前提下，缓存的使用，是提升系统性能、改善用户体验的唯一解决之道。 缓存的定义 缓存最初的含义，是指用于加速 …...
AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学（ECC）是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础，例如椭圆曲线数字签…...
什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合：各模块职责清晰，便于独立开发…...
Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？
在大数据处理领域，Hive 作为 Hadoop 生态中重要的数据仓库工具，其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式，很多开发者常常陷入选择困境。本文将从底…...
Spring是如何解决Bean的循环依赖：三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间互相持有对方引用，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...