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

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' }
 ]
 }
})

对于单选按钮，复选框及选择框的选项，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的绑定操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue中v-model和v-bind绑定数据的异同

    vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data

  • vue.js自定义组件实现v-model双向数据绑定的示例代码

    我们都清楚v-model其实就是vue的一个语法糖,用于在表单控件或者组件上创建双向绑定. //表单控件上使用v-model <template> <input type="text" v-model="name" /> <input type="checkbox" v-model="checked"/> <!--上面的input和下面的input实现的效果是一样的--> <

  • vue绑定数字类型 value为数字的实例

    直接加: <el-select v-model="searchData.status" filterable placeholder="请选择" @change="gamefilter" class="mr40"> <el-option label="开启" :value='0'></el-option> <el-option label="关闭"

  • vue中v-model的应用及使用详解

    vue中v-model的应用及使用详解

    vue中经常使用到<input>和<textarea>这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别.vue使用v-model实现这些标签数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素. v-model本质上是一个语法糖.如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.t

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

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

  • Vue中Class和Style实现v-bind绑定的几种用法

    Vue中Class和Style实现v-bind绑定的几种用法

    项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了导航之外其他很多地方也都会用到这种方式处理选中与未选中. 除了设置 class 我们在项目中也经常设置元素的内联样式 style,在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 class 的添加/删除,利用 css() 方法设置/获取元素的内联样式. 那么在 vue 中 我们如何处理这类的效果呢?

  • Vue中component标签解决项目组件化操作

    一. 啰嗦几句 在vue项目组件化的过程中,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容的大组件的时候,发现在这个组件内部,实现了太多的if.for逻辑,包括大量的html元素,虽然说每段功能块都有批注,但是体积还是比较庞大,最近有些需求,需要将页面上的一大块筛选功能剥离开,形成单独的组件,统一数据渲染,统一组件管理,且这些功能无论是样式,或者是从结构来说,差异性都很大,所以考虑了以下几种开发方式: 1. 大容量单组件开发,渲染和传入的数据使用各种type.ctype判断 2.

  • vue中的双向数据绑定原理与常见操作技巧详解

    本文实例讲述了vue中的双向数据绑定原理与常见操作技巧.分享给大家供大家参考,具体如下: 什么是双向数据绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也是算是vue的精髓之处了.值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提,如果我们使用vuex,那么数据流也是单向的,这时就会和双向数据绑定有冲突,我们可以这么解决.

  • 在VUE中使用lodash的debounce和throttle操作

    说明: debounce和throttle在脚手架的使用,此处以防抖函数debounce为例避免按钮被重复点击 引入: import lodash from 'lodash' 使用: 直接使用debounce方法 // 审核 audit: lodash.debounce(function() { this.$refs['model'].saveTotalResult(1).then(() => { const reportId = this.activeReport.id; report.aud

  • 在vue中使用vant TreeSelect分类选择组件操作

    中文文档:TreeSelect 分类选择 效果展示: //先在你需要的页面中引入,第一个是弹出层,第二个是选择的 import { Popup } from "vant"; import { TreeSelect } from "vant"; 代码部分: <van-popup v-model="policeShow" position="top" :overlay="true"> <van

  • vue中的v-model原理,与组件自定义v-model详解

    VUE中的v-model可以实现双向绑定,但是原理是什么呢?往下看看吧 根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" 和 @input="", 就像下面这样 // 标准写法 <input v-model="name"> // 等价于 <input :value="name" @input="name = $event.target.val

  • vue中input框的禁用和可输入问题

    目录 input框的禁用和可输入 关于输入框的一些操作 input框的禁用和可输入 input是我们经常使用的文本输入框,在vue中我们可以用v-model来绑定输入框的值,但是有时我们拿到一个值并通过v-model绑定到一个input框里,但是我们只想要显示这个值,不能修改,然后在某些特定的情况下在去改变这个值,这个时候就牵涉到文本框的禁用了    <input       type="text"//绑定的值       v-model="Copy.possWord1

  • Vue中的数据驱动解释

    目录 Vue中数据驱动 数据驱动解释 Vue数据驱动 简单说说defineProperty Vue中数据驱动 使用过Vue框架的小伙伴知道在Vue中有这么一个玩意:v-model. 这个玩意就用到了Vue中的数据驱动(数据双向绑定). 那么,什么是数据驱动呢? 数据驱动解释 数据驱动是vue.js最大的特点.在vue.js中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom. 再通俗一点就是,你在这里改变了一下数据,在页面其他使用该数据的地方也会随之

  • vue中改变选中当前项的显示隐藏或者状态的实现方法

    在vue中已经不像jq那样直接操作dom了,如果要指向当前选中项时,就不能再用jq的思路来做了,方法如下: 当指向一个状态的时候,只让指向的状态隐藏,其他项不变,如果项目中用了element-ui,那么操作起来会比较简单一些,这样设置: v-if="(row.id == currentId&&row.auditState==0)?checkState:!checkState" @mouseover="statehidden(row.id)" js中:

随机推荐