vue中v-model对select的绑定操作


Posted in Javascript onAugust 31, 2020

1、单选时

<select v-model="selected">
 <option disabled value="">请选择</option>
 <option>A</option>
 <option>B</option>
 <option>C</option>
 </select>
 <span>Selected: {{ selected }}</span>
data: {
 selected: ''
 }

如果 v-model表达式的value初始值未能匹配任何选项,<select>

元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。

2、多选时(绑定到一个数组)

<select v-model="selected" multiple style="width: 50px;">
 <option>A</option>
 <option>B</option>
 <option>C</option>
 </select>
 <br>
 <span>Selected: {{ selected }}</span>
data: {
 selected: []
 }

3、用 v-for渲染的动态选项:

<select v-model="selected">
 <option v-for="option in options" v-bind:value="option.value">
 {{ option.text }}
 </option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
 el: '...',
 data: {
 selected: 'A',
 options: [
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
 ]
 }
})

vue中v-model对select的绑定操作

对于单选按钮,复选框及选择框的选项,v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值),有时我们可能想把值绑定到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串

<select v-model="selected">
 <!-- 内联对象字面量 -->
 <option v-bind:value="{ number: 123 }">123</option>
</select>
// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

具体参考 https://cn.vuejs.org/v2/guide/forms.html#选择框

补充知识:v-model绑定后设置selected问题

v-model绑定数据后设置selected无效原因

v-model绑定的数据需要与selected的option值相同才生效

以上这篇vue中v-model对select的绑定操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
js 替换
Feb 19 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 #Javascript
vue绑定数字类型 value为数字的实例
Aug 31 #Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 #Javascript
详解Node.JS模块 process
Aug 31 #Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 #Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 #Javascript
JS性能优化实现方法及优点进行
Aug 30 #Javascript
You might like
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
jQuery.each使用详解
2015/07/07 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
javascript随机变色实例代码
2019/10/15 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python实现两张图片的像素融合
2019/02/23 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
python 常见的排序算法实现汇总
2020/08/21 Python
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
娱乐节目策划方案
2014/06/10 职场文书
2014年秘书工作总结
2014/11/25 职场文书
2014年校长工作总结
2014/12/11 职场文书
2015年读书月活动总结
2015/03/26 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python