表单输入绑定 值绑定

简介: 表单输入绑定 值绑定

值绑定

对于单选按钮,复选框和选择器选项,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 还使我们可以将选项值绑定为非字符串的数据类型。

复选框

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

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

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

true-valuefalse-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 }

相关文章
|
机器学习/深度学习 缓存 人工智能
大语言模型中常用的旋转位置编码RoPE详解:为什么它比绝对或相对位置编码更好?
Transformer的基石自2017年后历经变革,2022年RoPE引领NLP新方向,现已被顶级模型如Llama、Llama2等采纳。RoPE融合绝对与相对位置编码优点,解决传统方法的序列长度限制和相对位置表示问题。它通过旋转矩阵对词向量应用角度与位置成正比的旋转,保持向量稳定,保留相对位置信息,适用于长序列处理,提升了模型效率和性能。RoPE的引入开启了Transformer的新篇章,推动了NLP的进展。[[1](https://avoid.overfit.cn/post/9e0d8e7687a94d1ead9aeea65bb2a129)]
1652 0
|
存储 网络协议 小程序
软考中级网络工程师备考分享
分享我参与2022年下半年软考网工的心得体会
1326 0
软考中级网络工程师备考分享
|
10月前
|
Java
缓冲流和转换流的使用【 File类+IO流知识回顾③】
这篇文章介绍了Java中缓冲流(BufferedInputStream, BufferedOutputStream, BufferedReader, BufferedWriter)和转换流(InputStreamReader, OutputStreamWriter)的使用,包括它们的构造方法和如何利用它们提高IO操作的效率及处理字符编码问题。
缓冲流和转换流的使用【 File类+IO流知识回顾③】
|
弹性计算
购买阿里云服务器后,在哪里查看服务器信息?
今天就遇见了一位找不到自己服务器的朋友,下面专门为新来的伙伴们介绍一下在哪里查看自己的服务器产品。 1、登录阿里云后,进入控制台 控制台左侧菜单,找到云服务器ECS 2、在我的资源点击对应的服务器或者实例 (点击这个数字) 3、打开相对应的服务器 4、就可以查看服务器的详细配置啦
22445 1
|
10月前
|
Windows
如何访问GitHub快的飞起?两步解决访问超时GitHub,无法访问GitHub的问题
这篇文章提供了几种方法来解决访问GitHub时速度慢或超时的问题,包括使用代理服务器、下载加速工具,以及考虑使用国内代码管理网站如码云(gitee)来加速下载GitHub上的资源。
如何访问GitHub快的飞起?两步解决访问超时GitHub,无法访问GitHub的问题
|
11月前
|
存储 缓存 搜索推荐
Flutter开发者必读:sp_util - SharedPreferences的终极解决方案
Flutter开发者必读:sp_util - SharedPreferences的终极解决方案
179 0
vue2 自定义 v-model (model选项的使用)
vue2 自定义 v-model (model选项的使用)
1454 1
|
缓存 Shell API
作者推荐 | 一文深度解读 — 彻底认识与理解微服务技术之Rest与Restful架构精髓
作者推荐 | 一文深度解读 — 彻底认识与理解微服务技术之Rest与Restful架构精髓
739 0
|
缓存 网络架构
restful风格是什么风格
restful风格是什么风格
178 0
|
消息中间件 存储 缓存
消息队列之推还是拉,RocketMQ 和 Kafka 是如何做的?(上)
消息队列之推还是拉,RocketMQ 和 Kafka 是如何做的?(上)
消息队列之推还是拉,RocketMQ 和 Kafka 是如何做的?(上)