select 作业

来源：互联网发布：bgm制作软件编辑：程序博客网时间：2024/05/18 18:17

<body>
<div id="app">
<h2>自定义下拉框</h2>
<table>

<custom-select btn-value="查询" v-bind:list="list1"></custom-select>
</table>
<h2>自定义下拉框</h2>
<custom-select btn-value="go" v-bind:list="list2"></custom-select>
</div>
<script>
var obj = {
selectShow: false
}
Vue.component("custom-select",{
data:function(){
return {
selectShow:false,
val:''
};
},
props:['btnValue','list'],
template: `
<section class="wrap">
<div class="searchInput clearfix">
<div class="clearfix">
<input type="text" class="keyword" @click="selectShow=!selectShow" v-model="val">
<input type="button" class="go" value="go" v-bind:value = "btnValue" >
<span></span>
</div>
<custom-list v-show="selectShow" :list="list" @receive="changeValue"></custom-list>
</div>
</section>
`,
methods:{
changeValue(value){
this.val = value;
}
}
})
Vue.component("custom-list",{
props:["list"],
template:`
<ul class="list" >
<li v-for="item of list" @click="selectValue(item)">{{item}}</li>
</ul>
`,
methods:{
selectValue:function(item){
this.$emit("receive",item)
}
}
})
new Vue({
el:"#app",
data:{
list1:["beijing","chengdu","wuhan","shanghai"],
list2:["mon","tues","wed","thurs"]
}
})
</script>

0 0