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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
vue.js学习之递归组件
Dec 13 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
js实现九宫格布局效果
May 28 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改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
vue中的inject学习教程
2019/04/24 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
《Python学习手册》学习总结
2018/01/17 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
python内存动态分配过程详解
2019/07/15 Python
Python pandas用法最全整理
2019/08/04 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
pandas分批读取大数据集教程
2020/06/06 Python
Python利用命名空间解析XML文档
2020/08/10 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
python 递归相关知识总结
2021/03/03 Python
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
陈欧广告词
2014/03/14 职场文书
企业员工集体活动方案
2014/08/17 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
零基础学java之循环语句的使用
2022/04/10 Java/Android
Java版 单机五子棋
2022/05/04 Java/Android