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…...
光流估计在自动驾驶中的5大应用场景：从车道线检测到碰撞预警
光流估计在自动驾驶中的5大应用场景：从车道线检测到碰撞预警 当一辆自动驾驶汽车以60公里/小时的速度行驶时，每秒需要处理超过100万像素的运动信息。传统基于静态图像的分析方法在这种动态场景中显得力不从心，而光流技术通过捕捉像素级的运动…...
数据分析师课程
数据分析是什么定义：运用统计分析方法对收集的数据进行汇总、理解和消化，最大化开发数据功能数据形式：观测值通过实验/测量获得，常以图表或表格呈现分类体系：描述性分析（初级）：占日常…...
AMD新平台装CentOS7.9总报Kernel Panic？别折腾了，试试Rocky Linux 9.2吧
AMD新平台安装CentOS7.9遭遇Kernel Panic？Rocky Linux 9.2的完美替代方案 最近几年，AMD的Zen3架构处理器凭借出色的性能和能效比，赢得了大量开发者和技术爱好者的青睐。然而，当这些用户尝试在Ryzen 5000系列平台上安装某些较旧的L…...
yaml-cpp终极内存优化指南：5个提升缓存命中率的实现技巧
yaml-cpp终极内存优化指南：5个提升缓存命中率的实现技巧 【免费下载链接】yaml-cpp A YAML parser and emitter in C 项目地址: https://gitcode.com/gh_mirrors/ya/yaml-cpp yaml-cpp是一个高性能的C YAML解析器和发射器，完全遵循YAML 1.2规范。…...
PostCSS-CSSNext终极指南：10个关键检查点确保CSS代码质量与兼容性
PostCSS-CSSNext终极指南：10个关键检查点确保CSS代码质量与兼容性 【免费下载链接】postcss-cssnext postcss-cssnext has been deprecated in favor of postcss-preset-env. 项目地址: https://gitcode.com/gh_mirrors/po/postcss-cssnext PostCSS-CSSNext是…...
LTspice2Matlab：电路仿真数据导入MATLAB的高效解决方案
LTspice2Matlab：电路仿真数据导入MATLAB的高效解决方案 【免费下载链接】ltspice2matlab LTspice2Matlab - Import LTspice data into MATLAB 项目地址: https://gitcode.com/gh_mirrors/lt/ltspice2matlab 在电路设计与仿真工作中，如何将LTspice…...
实战应用：基于快马平台快速开发openclaw视觉分拣机器人demo
实战应用：基于快马平台快速开发openclaw视觉分拣机器人demo 最近在研究工业自动化场景，正好用InsCode(快马)平台尝试做了一个视觉分拣机器人的demo。这个项目模拟了流水线上用机械臂分拣不同颜色物品的场景，特别适合用来验证自动化分拣方案的…...
NoSleep防休眠工具：让系统持续运行的轻量级解决方案
NoSleep防休眠工具：让系统持续运行的轻量级解决方案 【免费下载链接】NoSleep Lightweight Windows utility to prevent screen locking 项目地址: https://gitcode.com/gh_mirrors/nos/NoSleep 在现代工作环境中，电脑意外休眠常常成为工作流程的…...
哥伦比亚AI中心四项教师研究奖
机器学习 哥伦比亚人工智能技术中心宣布四项新教师研究奖 第三轮年度奖项表彰探索人工智能领域一系列挑战的创新研究。 作者：Staff writer 2023年7月25日 4分钟阅读 哥伦比亚工程学院与某机构宣布了哥伦比亚人工智能技术中心（CAIT）的四项…...
差动保护：电力系统的核心安全保障技术
差动保护电流差动保护是电力系统的"铁闸门"，核心思想简单粗暴：比较设备两端的电流是否对得上账。就像两个会计同时记账，如果两边数据差太多，肯定有人搞鬼——要么线路漏电，要么设备内部短路。举个接地气的例…...