iview里面的select可以多选，同时动态显示你选了几条数据

先上效果图：

分析：

要想让上面的显示，下面的select的选中几条的数据，只需要把下面的selcet加一个on-change事件绑定就可以。

然后判断里面的length 的长度，就是你需要的结果；

@on-change="get_num" 

 get_num(data){
                console.log("data",data);
                this.num = data.length;
   },

代码如下：

<template>
    <div>
        <Select v-model="model10" multiple style="width:260px" @on-change="get_num">
            <Option v-for="(item,index) in cityList" :value="item.label" :key="index">{{ item.label }}</Option>
        </Select>
        <div>
            <Input type="text" v-model="num" disabled style="width:150px" />
            <Button type="primary"  @click="sumit()">提交</Button>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                num:0,
                cityList: [
                    {
                        value: '1',
                        label: 'New York'
                    },
                    {
                        value: '2',
                        label: 'London'
                    },
                    {
                        value: '3',
                        label: 'Sydney'
                    },
                    {
                        value: '4',
                        label: 'Ottawa'
                    },
                    {
                        value: '5',
                        label: 'Paris'
                    },
                    {
                        value: '6',
                        label: 'Canberra'
                    }
                ],
                model10: []
            }
        },
        methods:{
            get_num(data){
                console.log("data",data);
                this.num = data.length;
            },
            sumit(e){
                console.log("提交",e);
            }
        }
    }
</script>
<style>
</style>