Vue基础使用之V-Model绑定单选、复选、动态渲染选项的值
这里要说明一下，在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…...
分析ARP解析过程
1、实验环境 主机A和主机B连接到交换机，并与一台路由器互连，如图7.17所示，路由器充当网关。 图7.17 实验案例一示意图 2、需求描述 查看 ARP 相关信息,熟悉在PC 和 Cisco 设备上的常用命令,设置主机A和主机B为同一个网段网关设置为路由接…...
为硬刚小米SU7，华为智界S7整出了「梅开二度」操作
如今国产中大型新能源轿车市场，在小米 SU7 加入后，可算彻底活了过来。 过去几年，咱们自主新能源品牌在 20-30 万元级轿车上发力明显不足，老牌车厂比亚迪汉几乎以一己之力扛起销量担当。 随着新能源汽车消费升级、竞争加剧&#x…...
408数据结构，怎么练习算法大题？
其实考研的数据结构算法题是有得分技巧的 得分要点 会写结构定义（没有就自己写上）写清楚解题的算法思想描述清楚算法实现最后写出时间和空间复杂度 以上这四步是完成一道算法题的基本步骤，也是其中得分的主要地方就是后面两步。但是前面两…...
imgcat 工具
如果经常在远程服务器或嵌入式设备中操作图片，要查看图片效果，就要先把图片dump到本地，比较麻烦。可以使用这个工具，直接在终端上显示。类似于这种效果。 imgcat 是一个终端工具，使用 iTerm2 内置的特性，允…...
Anaconda换清华源
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…...
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…...
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.启动镜像【挂载目录用于放置…...
2023年看雪安全技术峰会（公开）PPT合集（11份）
2023年看雪安全技术峰会（公开）PPT合集，共11份，供大家学习参阅。 1、MaginotDNS攻击：绕过DNS 缓存防御的马奇诺防线 2、从形式逻辑计算到神经计算：针对LLM角色扮演攻击的威胁分析以及防御实践 3、TheDog、0…...
Docker仅需3步搭建免费私有化的AI搜索引擎-FreeAskInternet
简介 FreeAskInternet 是一个完全免费、私有且本地运行的搜索引擎，并使用 LLM 生成答案，无需 GPU。用户可以提出问题，系统会进行多引擎搜索，并将搜索结果合并到ChatGPT3.5 LLM中，并根据搜索结果生成答案。 什么是 Fr…...
线程安全的单例模式
使用 synchronized 修饰 getInstance 方法 确保了只有一个线程可以同时访问 getInstance 方法。这意味着在任何时候只有一个线程可以执行 getInstance() 方法，从而避免了多个线程同时创建多个实例的情况，因此是线程安全的。 public class ClientUtil {…...
OpenHarmony实战开发-Grid和List内拖拽交换子组件位置。
介绍 本示例分别通过onItemDrop()和onDrop()回调，实现子组件在Grid和List中的子组件位置交换。 效果图预览 使用说明： 拖拽Grid中子组件，到目标Grid子组件位置，进行两者位置互换。拖拽List中子组件，到目标List子组件…...
设计模式：时序图
设计模式：时序图 设计模式：时序图时序图元素（Sequence Diagram Elements）角色（Actor）对象（Object）生命线（Lifeline）控制焦点（Focus of Control&am…...
前端性能监控（面试常见）
1. 用户体验优化 2. Web Vitals提取了几个核心网络指标 哇一头死 FCL 三大指标 FID被 INP干点 Largest Contentful Paint (LCP)：最大内容绘制 衡量加载性能。 为了提供良好的用户体验，LCP 必须在网页首次开始加载后的 2.5 秒内发生。Interaction to Ne…...
react17 + antd4 如何实现Card组件与左侧内容对齐并撑满高度
在使用antd进行页面布局时，经常会遇到需要将内容区域进行左右分栏，并在右侧区域内放置一个或多个Card组件的情况。然而，有时我们会发现右侧的Card组件并不能与左侧的栏目对齐，尤其是当左侧栏目高度动态变化时。本文将介绍如何使用…...
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、卸…...
堆放砖块-第12届蓝桥杯选拔赛Python真题精选
[导读]：超平老师的Scratch蓝桥杯真题解读系列在推出之后，受到了广大老师和家长的好评，非常感谢各位的认可和厚爱。作为回馈，超平老师计划推出《Python蓝桥杯真题解析100讲》，这是解读系列的第47讲。 堆放砖块…...
019——IIC模块驱动开发（基于EEPROM【AT24C02】和I.MX6uLL）
目录 一、 IIC基础知识 二、Linux中的IIC（韦东山老师的学习笔记） 1. I2C驱动程序的层次 2. I2C总线-设备-驱动模型 2.1 i2c_driver 2.2 i2c_client 三、 AT24C02 介绍 四、 AT24C02驱动开发 实验 驱动程序 应用程序 一、 IIC基础知识 总线类…...
【开发篇】十三、JVM基础参数设置与垃圾回收器的选择
文章目录 1、-Xmx 和 –Xms2、-XX:MaxMetaspaceSize 和 –XX:MetaspaceSize3、-Xss4、不建议改的参数5、其他参数6、选择GC回收器的调试思路7、CMS的并发模式失败现象的解决8、调优案例 GC问题解决方式： 优化JVM基础参数，避免频繁Full GC减少对象的产生…...
多维 HighCharts
1：showHighChart.html <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><!-- js脚本都是官方的,后两个是highchart脚本 --><script type"text/javascript" src"jquery1.7.1.mi…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935，SRS管理页面端口是8080，可…...
Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）
引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
是否存在路径（FIFOBB算法）
题目描述 一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数，分别表示n 和 e 的值（1…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效，稳定，易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
02.运算符
目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&：逻辑与 ||：逻辑或 ！：逻辑非 短路求值 位运算符 按位与&： 按位或 | 按位取反~ …...
Vue 3 + WebSocket 实战：公司通知实时推送功能详解
📢 Vue 3 WebSocket 实战：公司通知实时推送功能详解 📌 收藏 点赞 关注，项目中要用到推送功能时就不怕找不到了！ 实时通知是企业系统中常见的功能，比如：管理员发布通知后，所有用户…...
Java数组Arrays操作全攻略
Arrays类的概述 Java中的Arrays类位于java.util包中，提供了一系列静态方法用于操作数组（如排序、搜索、填充、比较等）。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序（sort） 对数组进行升序…...