当前位置：首页 > news >正文

15 使用v-model绑定单选框

news 2025/6/24 8:46:25

概述

使用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…...

编程日记 2023/12/20 12:52:52

go语言指针变量定义及说明

go语言指针主要需要记住两个特殊符号， 一个是 & 用来获取变量对应的内存地址另一个是 * 用来获取指针对应的变量值下面是个最简单的go语言指针说明 package mainimport "fmt"//指针为内存地址func main() {var a string "指针对应的变量&…...

编程日记 2023/12/20 12:51:51

基于“Galera+MariaDB”搭建多主数据库集群的实例

1、什么是多主数据库集群多主数据库集群是一种数据库集群架构，每个节点都可以接收写入操作和读取操作，并且通过心跳机制同步数据，保证数据一致性和高可用性。因多主数据库集群每个节点都可以承担读写操作，因此它可以充分利用各个…...

编程日记 2023/12/20 12:50:50

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…...

编程日记 2023/12/20 12:48:48

算法学习——回溯算法

回溯算法理论基础回溯法的效率回溯法解决的问题回溯法模板组合思路回溯法三部曲代码组合（优化）组合总和III思路代码电话号码的字母组合思路回溯法来解决n个for循环的问题回溯三部曲代码组合总和思路代码组合总和II思路代码理论基础什么是回溯法…...

编程日记 2023/12/20 12:44:45

C语言—小小圣诞树

这个代码会询问用户输入圣诞树的高度，然后根据输入的高度在控制台上显示相应高度的圣诞树。 #include <stdio.h>int main() {int height, spaces, stars;printf("请输入圣诞树的高度: ");scanf("%d", &height);spaces height - 1;st…...

编程日记 2023/12/20 12:42:43

自定义控件通过继承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…...

编程日记 2023/12/20 12:41:42

tensorflow入门自定义模型

前面说了自定义的层，接下来自定义模型，我们以下图为例子这个模型没啥意义，单纯是为了写代码实现这个模型首先呢，我们看有几个部分，dense不需要我们实现了，我们就实现Res，为了实现那个*3,我们…...

编程日记 2023/12/20 12:37:37

虚拟机启动 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 再修复则修复成功...

编程日记 2023/12/20 12:36:37

【MYSQL】-库的操作

💖作者：小树苗渴望变成参天大树🎈 🎉作者宣言：认真写好每一篇博客💤 🎊作者gitee:gitee✨ 💞作者专栏：C语言,数据结构初阶,Linux,C 动态规划算法🎄 如果你 …...

编程日记 2023/12/20 12:29:31

网络协议小记

一、TCP/IP协议作为一个小萌新，当然我无法将tcp/ip协议的大部分江山和盘托出，但是其中很多面试可能问到的知识，我觉得有必要总结一下！ 首先，在学习tcp/ip协议之前，我们必须搞明白什么是tcp/ip协议。 1、…...

编程日记 2023/12/20 12:24:26

STM32-I2C通讯-AHT20温湿度检测

非常感谢，提供的视频学习 https://www.bilibili.com/video/BV1QN411D7ak/?spm_id_from333.788&vd_source8ca4826038edd44bb618801808a5e076 该文章注意：串口显示中文会乱码，必须选用支持ASCII的串口助手，才能正常显示中文。…...

编程日记 2023/12/20 12:21:23

【机器学习】043_准确率、精确率、召回率

一、定义在处理偏斜数据集时，通常使用不同的误差度量，而不仅仅是使用分类误差来衡量算法性能。 1. 混淆矩阵的概念二分类问题的混淆矩阵为2X2矩阵，由四部分组成： 假阴性（FN）：模型预测为负…...

编程日记 2023/12/20 12:19:21

【Qt开发流程】之文件目录、文件、输入和输出

概述应用程序操作过程中，经常要对设备或文件进行读或者写操作。也会经常对文件及目录进行操作。在Qt中，QIODevice类是Qt中所有进行I/O操作的设备的基类，比如QFile、 QIODevice为支持数据块读写的设备（如QFile、QBuffer和QTcpSo…...

编程日记 2023/12/20 12:15:18

CSS的基本选择器及高级选择器（附详细示例以及效果图）

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍HTML中CSS的基础选择及高级选择器（详解）以及部分理论知识 🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍉博主收将持续更新学习记录获&#xf…...

编程日记 2023/12/20 12:13:16

股票价格预测 | Python实现基于Stacked-LSTM的股票预测模型，可预测未来（keras）

文章目录效果一览文章概述模型描述源码设计效果一览文章概述以股票价格预测为例，基于Stacked-LSTM的股票预测模型（keras），可预测未来。模型描述 LSTM 用于处理序列数据，如时间序列、文本和音频。相对于传统的RNN，LSTM更擅长捕获长期依赖关系，...

编程日记 2023/12/20 12:06:08

数据可视化---离群值展示

内容导航类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统…...

编程日记 2023/12/20 12:03:06

LeetCode Hot100 51.N皇后

题目： 按照国际象棋的规则，皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题研究的是如何将 n 个皇后放置在 nn 的棋盘上，并且使皇后彼此之间不能相互攻击。给你一个整数 n ，返回所有不同的 n 皇后问题的…...

编程日记 2023/12/20 12:02:05

机器学习 | 贝叶斯方法

不同于KNN最近邻算法的空间思维，线性算法的线性思维，决策树算法的树状思维，神经网络的网状思维，SVM的升维思维。贝叶斯方法强调的是先后的因果思维。监督式模型分为判别式模型和生成式模型。判别模型和生成模型的区别&#xf…...

编程日记 2023/12/20 12:00:02

缓存的定义及重要知识点

文章目录缓存的意义缓存的定义缓存原理缓存的基本思想缓存的优势缓存的代价缓存的重要知识点缓存的意义在互联网高访问量的前提下，缓存的使用，是提升系统性能、改善用户体验的唯一解决之道。缓存的定义缓存最初的含义，是指用于加速 …...

编程日记 2023/12/20 11:59:00

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义（Task Definition&…...

编程新知 2025/6/22 21:37:22

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。具体可参…...

编程新知 2025/6/15 20:37:19

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化：人工智能的自我改进与监管挑战文章目录递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/6/19 4:37:30

【kafka】Golang实现分布式Masscan任务调度系统

要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。服务端程序： 从kafka消费者接收…...

编程新知 2025/6/21 14:29:50

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/6/21 19:01:12

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形总结前言学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...

编程新知 2025/6/21 21:12:56

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑一、学生端在主界面可以选择自己的用户角色选择学生则进入学生登录界面…...

编程新知 2025/6/21 20:16:00

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎（Physics Engine） 物理引擎是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于游戏开发、动画制作、虚…...

编程新知 2025/6/21 12:33:28

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/6/22 2:37:13

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇，是在之前两篇博客的基础上展开，主要介绍如何在操作界面中创建和拖动物体，这篇博客跟随的视频链接如下： B 站视频：s03-创建和移动物体如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/6/22 6:46:01

概述