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

Vue基础使用之V-Model绑定单选、复选、动态渲染选项的值

news 文章来源：https://blog.csdn.net/zcyzcyjava/article/details/137838753 2024/10/28 13:19:18

这里要说明一下，在v-model 绑定的值是id还是value是和<option>中的v-bind保持一致的，如第四个，如果是

<option :value="op[1]"

那v-model绑定的就是数组第二项的值2，4，6

如果是

<option :value="op[1]"

那v-model绑定的就是数组第一项的值1，3，5

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h1>1.复选框</h1><input type="checkbox" id="jack" value="Jack" v-model="checkedNames"><label for="jack">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"><label for="mike">Mike</label><br><span>Checked names: {{ checkedNames }}</span><h1>2.单选按钮</h1>
<!--    <input type="radio" id="one" value="One" v-model="picked">One-->
<!--    <input type="radio" id="two" value="Two" v-model="picked">Two--><div v-for="option in options" :key="option.id"><inputtype="radio":id="option.id":value="option.value"v-model="selectedOption"/>/><label :for="option.id">{{ option.text }}</label></div><p>选中的是：{{ selectedOption }}</p><h1>3.渲染动态选项</h1><select v-model="selected"><option v-for="option in options1" :value="option.text">{{ option.text }}</option></select><span>Selected: {{ selected }}</span><h1>4.动态渲染  v-model绑定value与key的问题</h1><select v-model="test"><option :value="op[1]" v-text="op[0]"  v-for="op in options2"></option></select><div v-text="test"></div></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({el: '#app',data:{checkedNames:["Jack","John"],//初始化时多选框选中的数据selectedOption: 'Option 2',//v-model默认绑定的是value；因为v-model是个语法糖，是:value='值'和input事件的结合体options: [{ id: '1', value: 'Option 1', text: '选项1' },{ id: '2', value: 'Option 2', text: '选项2' },{ id: '3', value: 'Option 3', text: '选项3' },],selected: 'One',test: '',options1: [{ text: 'One', value: 'A' },{ text: 'Two', value: 'B' },{ text: 'Three', value: 'C' }],options2:[[1, 2],[3, 4],[5, 6]],},})
</script>
</body>
</html>

Vue基础使用之V-Model绑定单选、复选、动态渲染选项的值

这里要说明一下，在v-model 绑定的值是id还是value是和<option>中的v-bind保持一致的，如第四个，如果是 <option :value"op[1]" 那v-model绑定的就是数组第二项的值2，4，6 如果是 <option :va…...

编程日记 2024/4/16 22:03:33

分析ARP解析过程

1、实验环境主机A和主机B连接到交换机，并与一台路由器互连，如图7.17所示，路由器充当网关。图7.17 实验案例一示意图 2、需求描述查看 ARP 相关信息,熟悉在PC 和 Cisco 设备上的常用命令,设置主机A和主机B为同一个网段网关设置为路由接…...

编程日记 2024/4/16 22:02:32

为硬刚小米SU7，华为智界S7整出了「梅开二度」操作

如今国产中大型新能源轿车市场，在小米 SU7 加入后，可算彻底活了过来。过去几年，咱们自主新能源品牌在 20-30 万元级轿车上发力明显不足，老牌车厂比亚迪汉几乎以一己之力扛起销量担当。随着新能源汽车消费升级、竞争加剧&#x…...

编程日记 2024/4/16 21:59:29

408数据结构，怎么练习算法大题？

其实考研的数据结构算法题是有得分技巧的得分要点会写结构定义（没有就自己写上）写清楚解题的算法思想描述清楚算法实现最后写出时间和空间复杂度以上这四步是完成一道算法题的基本步骤，也是其中得分的主要地方就是后面两步。但是前面两…...

编程日记 2024/4/16 21:58:27

imgcat 工具

如果经常在远程服务器或嵌入式设备中操作图片，要查看图片效果，就要先把图片dump到本地，比较麻烦。可以使用这个工具，直接在终端上显示。类似于这种效果。 imgcat 是一个终端工具，使用 iTerm2 内置的特性，允…...

编程日记 2024/4/16 21:57:25

1. 查看conda配置文件 sudo vim ~/.condarc2. 删除~/.condarc文件内容使用vim中的dd命令 3. 打开并复制清华源的地址粘贴到~/.condarc文件中 https://mirrors4.tuna.tsinghua.edu.cn/help/anaconda/ channels:- defaults show_channel_urls: true default_channels:- https…...

编程日记 2024/4/16 21:56:23

react使用npm i @reduxjs/toolkit react-redux

npm i reduxjs/toolkit react-redux 创建一个 store文件夹，里面创建index.js文件和子模块文件夹 index,js文件写入以下代码 import {configureStore} from reduxjs/toolkit // 导入子模块 import counterReducer from ./modules/one import two from ./modules/tw…...

编程日记 2024/4/16 21:55:22

Nessus【部署 03】Docker部署漏洞扫描工具Nessus详细过程分享（下载+安装+注册+激活）文末福利

Docker部署漏洞扫描工具Nessus 1.安装2.配置2.1 添加用户2.2 获取Challenge code2.3 获取插件和许可证2.4 注册 3.使用4.进阶整体流程： 1.安装 # 1.查询镜像 docker search nessus# 2.拉取镜像 docker pull tenableofficial/nessus# 3.启动镜像【挂载目录用于放置…...

编程日记 2024/4/16 21:53:20

2023年看雪安全技术峰会（公开）PPT合集（11份）

2023年看雪安全技术峰会（公开）PPT合集，共11份，供大家学习参阅。 1、MaginotDNS攻击：绕过DNS 缓存防御的马奇诺防线 2、从形式逻辑计算到神经计算：针对LLM角色扮演攻击的威胁分析以及防御实践 3、TheDog、0…...

编程日记 2024/4/16 21:47:14

Docker仅需3步搭建免费私有化的AI搜索引擎-FreeAskInternet

简介 FreeAskInternet 是一个完全免费、私有且本地运行的搜索引擎，并使用 LLM 生成答案，无需 GPU。用户可以提出问题，系统会进行多引擎搜索，并将搜索结果合并到ChatGPT3.5 LLM中，并根据搜索结果生成答案。什么是 Fr…...

编程日记 2024/4/16 21:43:10

线程安全的单例模式

使用 synchronized 修饰 getInstance 方法确保了只有一个线程可以同时访问 getInstance 方法。这意味着在任何时候只有一个线程可以执行 getInstance() 方法，从而避免了多个线程同时创建多个实例的情况，因此是线程安全的。 public class ClientUtil {…...

编程日记 2024/4/16 21:41:05

OpenHarmony实战开发-Grid和List内拖拽交换子组件位置。

介绍本示例分别通过onItemDrop()和onDrop()回调，实现子组件在Grid和List中的子组件位置交换。效果图预览使用说明： 拖拽Grid中子组件，到目标Grid子组件位置，进行两者位置互换。拖拽List中子组件，到目标List子组件…...

编程日记 2024/4/16 21:40:04

设计模式：时序图

设计模式：时序图设计模式：时序图时序图元素（Sequence Diagram Elements）角色（Actor）对象（Object）生命线（Lifeline）控制焦点（Focus of Control&am…...

编程日记 2024/4/16 21:38:02

前端性能监控（面试常见）

1. 用户体验优化 2. Web Vitals提取了几个核心网络指标哇一头死 FCL 三大指标 FID被 INP干点 Largest Contentful Paint (LCP)：最大内容绘制衡量加载性能。为了提供良好的用户体验，LCP 必须在网页首次开始加载后的 2.5 秒内发生。Interaction to Ne…...

编程日记 2024/4/16 21:37:01

react17 + antd4 如何实现Card组件与左侧内容对齐并撑满高度

在使用antd进行页面布局时，经常会遇到需要将内容区域进行左右分栏，并在右侧区域内放置一个或多个Card组件的情况。然而，有时我们会发现右侧的Card组件并不能与左侧的栏目对齐，尤其是当左侧栏目高度动态变化时。本文将介绍如何使用…...

编程日记 2024/4/16 21:35:59

Rust入门-Hello World

1、安装在 Linux 或 macOS 上安装 rustup 打开终端并输入下面命令： $ curl --proto https --tlsv1.2 https://sh.rustup.rs -sSf | sh如果安装成功，将出现下面这行： Rust is installed now. Great!2、更新 $ rustup self uninstall3、卸…...

编程日记 2024/4/16 21:34:58

堆放砖块-第12届蓝桥杯选拔赛Python真题精选

[导读]：超平老师的Scratch蓝桥杯真题解读系列在推出之后，受到了广大老师和家长的好评，非常感谢各位的认可和厚爱。作为回馈，超平老师计划推出《Python蓝桥杯真题解析100讲》，这是解读系列的第47讲。堆放砖块&#xf…...

编程日记 2024/4/16 21:31:55

019——IIC模块驱动开发（基于EEPROM【AT24C02】和I.MX6uLL）

目录一、 IIC基础知识二、Linux中的IIC（韦东山老师的学习笔记） 1. I2C驱动程序的层次 2. I2C总线-设备-驱动模型 2.1 i2c_driver 2.2 i2c_client 三、 AT24C02 介绍四、 AT24C02驱动开发实验驱动程序应用程序一、 IIC基础知识总线类…...

编程日记 2024/4/16 21:30:53

【开发篇】十三、JVM基础参数设置与垃圾回收器的选择

文章目录 1、-Xmx 和 –Xms2、-XX:MaxMetaspaceSize 和 –XX:MetaspaceSize3、-Xss4、不建议改的参数5、其他参数6、选择GC回收器的调试思路7、CMS的并发模式失败现象的解决8、调优案例 GC问题解决方式： 优化JVM基础参数，避免频繁Full GC减少对象的产生…...

编程日记 2024/4/16 21:26:49

多维 HighCharts

1：showHighChart.html <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><script type"text/javascript" src"jquery1.7.1.mi…...

编程日记 2024/4/16 21:25:48

单细胞RNA测序（scRNA-seq）cellranger count的细胞定量和aggr整合

单细胞RNA测序（scRNA-seq）基础知识可查看以下文章：单细胞RNA测序（scRNA-seq）工作流程入门单细胞RNA测序（scRNA-seq）细胞分离与扩增单细胞RNA测序（scRNA-seq）SRA数据下载及fastq-dumq数据拆分单细胞RNA测序（scRNA-seq）Cellranger流程入门和数据质控细胞定量…...

编程日记 2024/4/16 21:23:46

Unity URP 2021 Release-Notes

🌈Unity URP 2021 Release-Notes 本文信息收集来自自动搜集工具👈 版本更新内容2021.3.32URP: Vulkan URP will use MSAA samples count fallback from player settings. Prior to this x2 fallback would have been to upgrade to x4.(UUM-741)2021.3.…...

编程日记 2024/4/16 21:22:45

24应届生求职中QAQ

有没有大佬给个机会帮忙内推一下啊，找工作太难了QAQ。最近一直在BOOS上找工作，但是结果不太理想，一直没有找到满意的工作，有没有大佬帮忙内推一下，有的话请私信我QAQ。...

编程日记 2024/4/16 21:20:42

centos7离线安装postgresql13

**一.**安装存储库RPM yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm二.使用yumdownloader下载安装包 mkdir pg_yum cd pg_yum yumdownloader --resolve postgresql13-server**三.**上传rpm包到安…...

编程日记 2024/4/16 21:14:35

【JavaSE】搞定String类

前言本篇会细致讲解String类的常见用法，让小伙伴们搞定String类~ 欢迎关注个人主页：逸狼创造不易，可以点点赞吗~ 如有错误，欢迎指出~ 目录前言常用的三种字符串构造字符串长度length 字符串比较比较比较字符串的内容equals…...

编程日记 2024/4/16 21:13:34

数字乡村创新实践探索农业现代化与农村治理现代化新路径：科技赋能农村全面振兴与农民幸福生活

目录引言一、数字乡村与农业现代化 1、智慧农业技术的应用 2、农业产业链的数字化转型二、数字乡村与农村治理现代化 1、农村信息化水平的提升 2、农村治理模式的创新三、科技赋能农村全面振兴与农民幸福生活 1、提升农业生产效益与农民收入 2、促进农村产业结构…...

编程日记 2024/4/16 21:12:32

【从零开始手搓12306项目】四、12306是如何成为全球最忙碌的网站之一？

4.1 12306有多忙碌一天的请求量大概1600亿，平均180万/秒（二八理论：20%的事件产生80%的请求），不适合二八理论，因为12306分时间放票平均一年售出30亿张，高峰期日售票能力达到了2000万张高峰期…...

编程日记 2024/4/16 21:11:31

WebKit简介及工作流程

文章目录一、WebKit简介二、WebKit结构三、Webkit工作流程四、WebKit常见问题五、WebKit优点六、相关链接一、WebKit简介 WebKit是一个开源的浏览器引擎，它的起源可以追溯到2001年，当时苹果公司推出了其首款基于Unix的操作系统Mac OS X。在2002年&…...

编程日记 2024/4/16 21:10:30