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 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
jQuery使用方法
Feb 04 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
什么是SOLID
Mar 24 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
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
Python 列表(List)操作方法详解
2014/03/11 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
python and or用法详解
2019/06/26 Python
Python的互斥锁与信号量详解
2019/09/12 Python
python生成特定分布数的实例
2019/12/05 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
详解rem 适配布局
2018/10/31 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
工程造价管理专业大专生求职信
2013/10/06 职场文书
团员学习总结的自我评价范文
2013/10/14 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书