Vue学习（四）--vue实现select下拉框默认值
今天使⽤vue实现select下拉框时，发现⽤v-model绑定属性之后，原本默认显⽰第⼀条的select框变成了空⽩，在option标签中指定selected 属性也没有效果，于是总结了绑定不同属性类型下实现下拉框默认值的情况。这些⽅法在element-ui中的select选择器也适⽤。
1.单选下拉框设置默认值
在data中定义属性并赋予默认值，在select标签中使⽤v-model指令绑定该属性。
(1) 点击查看 vue 组件部分
(2) 点击查看 js 代码部分
2.多选下拉框
多选下拉框要指定select标签的multiple属性。与单选类似，区别是多选时使⽤v-model指令绑定数组属性，所有选中的选项值会保存到数组中。因此在data中初始化该属性为数组类型
(1) 点击查看 vue 组件部分
(2) 点击查看 js 代码部分
3. 获取计算属性的值
同样需要先在data中初始化默认值，然后把计算属性的结果值赋给该属性。这⾥使⽤多选下拉框的代码举例。
(1) 点击查看 vue 组件部分
(2) 点击查看 js 代码部分
4. 注意事项
(1) Html代码中，通过v-model可以获取到选中的值，如果option中存在value属性，优先获取value值，如果不存在，则获取option的⽂本内容；
jquery获取下拉框选中值(2) v-model指令绑定的数据属性，必须先在data中对该属性进⾏初始化；
(3) 使⽤v-model绑定属性后，在option标签中使⽤selected属性⽆法实现默认值，此时select框显⽰空⽩。需要在在初始化属性时对该属性赋予确定的值

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。