vue select

[5Mi]

• vue select

  <template id="vueselect">
        <div>
            <select @change="handleChange" v-model="selected">
                <!--活用  selected 和 disabled 属性-->
                <option value="">choose</option>
                <option v-for="item in items" v-text="item.name" :value="item.name"></option>
            </select>
            <div>{{selected}}</div>
            <button @click="handleClick">click</button>
        </div>
    </template>
  
    //js中
    Vue.component("vueselect",{
            template:'#vueselect',
            data(){
                return {
                    //双向绑定 option value是什么 select v-model的值就(选中的)是什么,反之亦然
                    selected:"aaa",
                    items:[
                    {name:'aaa',val:1},
                    {name:'bbb',val:2},
                    {name:'ccc',val:3},
                    {name:'ddd',val:4},
                    {name:'eee',val:5}
                ]
                }
            },
            methods:{
                handleChange(e){
                    console.log("change")
                },
                // 通过v-model改变选中不会触发select onchange方法
                handleClick(e){
                    //selected的值为空则选中option中value为空的项,在这里是choose那一项,selected的值在所有option的value中都不存在,则不显示选中内容
                    this.selected="",
                    this.items = [
                    {name:'123',val:1},
                    {name:'321',val:2},
                    {name:'231',val:3},
                    {name:'213',val:4},
                    {name:'132',val:5}
                ]
                }
            }
        });
  

• select标签中v-model双向绑定option中的value,展示选中的option,改变v-model的值展示的option也会改变,option中都不存在该值时,页面不展示

• 通过改变select的v-model,不会触发select的onchange方法