vue.js - 如何给iview的Select控件优雅的设置默认值的问题。

问题描述

问 题

1.使用iview的Select控件时发现并不能通过改变v-model的值来设置值。审查元素发现这个控件并非是在原生select的基础上修改的。所以如何优雅的给它赋上初始值？

html部分

<template>
    <Select v-model="model1" style="width:200px">
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
</template>

js部分

<script>
    export default {
        data () {
            return {
                cityList: [
                    {
                        value: 'beijing',
                        label: '北京市'
                    },
                    {
                        value: 'shanghai',
                        label: '上海市'
                    }
                ],
                model1: '默认值'
            }
        }
    }
</script>

解决方案

iview的Select控件是可以用v-model双向绑定，但是v-model中的值要与value中的值对应

也可以通过placeholder设置默认的显示文字

这篇关于vue.js - 如何给iview的Select控件优雅的设置默认值的问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！