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 相关文章推荐
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 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中current、next与reset函数用法实例
2014/11/17 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
angularjs自定义过滤器demo示例
2019/08/24 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
python中sets模块的用法实例
2014/09/30 Python
python 基础教程之Map使用方法
2017/01/17 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
一位农村小子的自荐信
2014/04/07 职场文书
怀念母亲教学反思
2014/04/28 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
2016高考感言
2015/08/01 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL