IMWeb训练营作业,自定义 select

来源：互联网发布：mac服务器ip地址查询编辑：程序博客网时间：2024/06/08 00:21

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>自定义 select</title>
<script src="vue.js"></script>
<style type="text/css">
.warp{

}
</style>
</head>
<body>
<div class="content">
<custom-select btn-value="搜索" :list="list"></custom-select>
</div>
<script>

Vue.component("custom-select",{
data:function () {
return {
selectshow:false,
val:""
}
},
props:["btnValue","list"],
template:`<section class="warp"><div>
<div>
<input type="text" :value="val" @click="selectshow=!selectshow"/>
<input type="button" :value="btnValue" />
</div>
<custom-list
v-show="selectshow"
@receive="chanageValHandle"
:list="list"
></custom-list>
</div>
</section>`,
methods:{
chanageValHandle(value){
this.val=value;
}
}

});

Vue.component("custom-list",{
props:["list"],
template:`<ul>
<li v-for="item of list" @click="sltvalHandle(item)">{{item}}</li>
</ul>`,
methods:{
sltvalHandle:function(item){
this.$emit("receive",item);
}
}

});

new Vue({
el:".content",
data:{
list:["北京","上海","广州","杭州"],
}
});

</script>
</body>

</html>

0 0