表单输入绑定 值绑定

值绑定​

对于单选按钮,复选框和选择器选项,v-model 绑定的值通常是静态的字符串 (或者对复选框是布尔值):

<!-- `picked` 在被选择时是字符串 "a" -->
<input type="radio" v-model="picked" value="a" /><!-- `toggle` 只会为 true 或 false -->
<input type="checkbox" v-model="toggle" /><!-- `selected` 在第一项被选中时为字符串 "abc" -->
<select v-model="selected"><option value="abc">ABC</option>
</select>

但有时我们可能希望将该值绑定到当前组件实例上的动态数据。这可以通过使用 v-bind 来实现。此外,使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型。

复选框

<inputtype="checkbox"v-model="toggle"true-value="yes"false-value="no" />

 true-value 和 false-value 是 Vue 特有的 attributes,仅支持和 v-model 配套使用。这里 toggle 属性的值会在选中时被设为 'yes',取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值:

<inputtype="checkbox"v-model="toggle":true-value="dynamicTrueValue":false-value="dynamicFalseValue" />

true-value 和 false-value attributes 不会影响 value attribute,因为浏览器在表单提交时,并不会包含未选择的复选框。为了保证这两个值 (例如:“yes”和“no”) 的其中之一被表单提交,请使用单选按钮作为替代。

单选按钮

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

pick 会在第一个按钮选中时被设为 first,在第二个按钮选中时被设为 second

选择器选项

<select v-model="selected"><!-- 内联对象字面量 --><option :value="{ number: 123 }">123</option>
</select>

 v-model 同样也支持非字符串类型的值绑定!在上面这个例子中,当某个选项被选中,selected 会被设为该对象字面量值 { number: 123 }

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/778993.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL5.7源码分析--连接

一、连接协议支持 mysql支持4种通信协议&#xff1a;TCP/IP协议、Unix Socket协议、Share Memory协议、NT管道 windows支持三种连接方式&#xff1a;TCP/IP协议、Share Memory协议、NT管道 unix支持两种连接方式&#xff1a;TCP/IP协议、Unix Socket协议 协议介绍如下&…

【C++】动态内存分配 与 对象的动态建立与释放

目录 动态建立和释放动态创建数组销毁堆对象销毁动态创建的数组 对象的动态建立与释放 动态建立和释放 new操作符动态分配内存建立的变量&#xff0c;称为“堆对象”或者“在动态存储中分配”。 new运算符创建的堆对象一直存在&#xff0c;直到使用delete运算符显示的销毁。ne…

[flask]http请求//获取请求体数据

import jsonfrom flask import Flask, requestapp Flask(__name__)app.route("/form1", methods["post"]) def form1():"""获取客户端请求的请求体[表单]:return:""""""获取表单数据请求url&#xff1a;&qu…

2024-03-29 问AI: 介绍一下ASM模型( Active Shape Model )

文心一言 ASM模型&#xff0c;即Active Shape Model&#xff08;主动形状模型&#xff09;&#xff0c;是Cootes于1995年提出的一种经典的人脸关键点检测算法。它基于点分布模型&#xff08;Point Distribution Model, PDM&#xff09;的算法&#xff0c;是一种对目标物体进行…

网络安全卷么?

官方宣传的是对的网络安全现在是朝阳行业&#xff0c;缺口是很大 不过网络安全行业就是需要技术很多的人达不到企业要求才导致人才缺口大 初级的现在有很多的运维人员转网络安全&#xff0c;初级也会慢慢的卷起来&#xff0c;但是岗位多不用怕&#xff0c;以后各大去也都会要网…

解决dtypes.py:513: FutureWarning:...系列问题【TensorFlow】

前情提要 我的TensorFlow版本是2.4.0&#xff0c;python环境是3.8.19 问题 在训练模型时出现以下报错&#xff1a; D:\anaconda3\envs\env_tf\lib\site-packages\tensorflow\python\framework\dtypes.py:513: FutureWarning: In the future np.object will be defined as t…

Git Fork后的仓库内容和原仓库保持一致

Git Fork后的仓库内容和原仓库保持一致 ①Fork原仓库内容到自己仓库 ②将项目内容下载到本地 ③使用git命令获取原仓库内容&#xff0c;将原仓库的最新内容合并到自己的分支上并推送 下面从第三步开始演示~ 这里以码云上的若依项目为演示项目 ③使用git命令获取原仓库内容 …

【八股】集合

HashMap HashMap是基于哈希表的Map接口实现&#xff0c;是非线程安全的。 JDK1.8之前 HashMap 底层是数组链表实现的&#xff0c;数组是HashMap的主题&#xff0c;链表则是为了解决哈希冲突的。&#xff08;拉链法&#xff09; JDK1.8之后 HashMap 在解决哈希冲突的方法有了较…

基于龙芯2k1000 mips架构ddr调试心得(二)

1、内存控制器概述 龙芯处理器内部集成的内存控制器的设计遵守 DDR2/3 SDRAM 的行业标准&#xff08;JESD79-2 和 JESD79-3&#xff09;。在龙芯处理器中&#xff0c;所实现的所有内存读/写操作都遵守 JESD79-2B 及 JESD79-3 的规定。龙芯处理器支持最大 4 个 CS&#xff08;由…

Spring Transaction 指定事务管理器问题

一&#xff0c;单个数据源&#xff0c;单个事务管理器与Transactional默认事务管理器名称不一致问题 在平时代码中使用声明性事务时&#xff0c;直接在方法上面加注解即可&#xff0c;如下 Transactional(rollbackFor Exception.class) 并没有指定事务管理器&#xff0c;为…

ESXi for ARM 1.15

官方文档页面已从 Flings 迁移到 ESXi-Arm Fling 1.15 Refresh - VMware Technology Network VMTN 下载地址为 https://customerconnect.vmware.com/downloads/get-download?downloadGroupESXI-ARM 需要VMware Customer Connect 账号登录。 更新如下&#xff1a; Changes …

探索直播美颜技术:计算机视觉在美颜SDK开发中的应用

下文&#xff0c;小编将深入探讨美颜技术在计算机视觉领域中的应用&#xff0c;特别是美颜SDK的开发过程&#xff0c;并剖析其技术原理和实现方法。 一、美颜技术的发展 这些算法往往难以满足用户对高质量美颜效果的需求&#xff0c;因此需要更加先进的技术手段来实现。 二、…

DM Mysql Oracle 日期函数 dameng

1. to_char 和 to_date 是oracle 和 DM 原生支持的日期函数 如下 YYYY-MM-DD HH24:MI:SS 纯大写纯小写都行 推荐使用 TO_CHAR 函数来格式化日期(而不推荐 DATE_FORMAT) SELECT to_char(SYSDATE, YYYY-MM-DD HH24:MI:SS) FROM dual;SELECT to_char(SYSDATE, yyyy-mm-dd h…

map与set容器常见操作详解(含示例代码及注意事项)

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生 &#x1f648;个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&…

LeetCode-热题100:73. 矩阵置零

题目描述 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a; matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a; [[1,0,1],[0,0,0],[1,0,1]] 示例 2&…

企微侧边栏开发(内部应用内嵌H5)

一、背景 公司的业务需要用企业微信和客户进行沟通&#xff0c;而客户的个人信息基本都存储在内部CRM系统中&#xff0c;对于销售来说需要一边看企微&#xff0c;一边去内部CRM系统查询&#xff0c;比较麻烦&#xff0c;希望能在企微增加一个侧边栏展示客户的详细信息&#xf…

常见手撕项目C++

常见手撕项目C 设计模式单例模式饿汉模式懒汉模式 设计模式 单例模式 单例模式是一种常用的软件设计模式&#xff0c;其目的是确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取该实例。 优点&#xff1a; 资源控制&#xff1a;单例模式能够确保一个类只有一个实…

淘宝订单中的涉及红包检测、优惠券检测方案|工具|API

首先&#xff0c;检测订单红包的核心价值是什么&#xff1f; “红包的本质就是薅平台羊毛&#xff1a;不用怀疑&#xff0c;平台对于这种损害平台利益的行为肯定是最高等级的稽查”。那么&#xff0c;在日常运营中&#xff0c;需要尽可能过滤这类订单。 其次&#xff0c;如何使…

2024-03-28 问AI: 介绍一下AI 大神,Ian Goodfellow

文心一言 Ian Goodfellow是机器学习领域的知名学者&#xff0c;对深度学习领域有着重要贡献。他生于1985年&#xff0c;本科和硕士阶段就读于斯坦福大学&#xff0c;师从吴恩达。博士阶段&#xff0c;他跟随蒙特利尔大学的著名学者Yoshua Bengio研究机器学习&#xff0c;并在2…

SQL注入 (一)

一、sql注入的简介 将一段内容传入到目标网站&#xff0c;这段内容会被当做程序来执行 二、MySQL扩展补充 mysql的结构 库表名字段数据 mysql的用户 管理员&#xff1a;跨库、文件读写操作普通用户&#xff1a;猜解 判断目标网站的用户类别 白盒&#xff1a;读代码黑盒…