您的位置：首页 > 其它

【IMWeb训练营作业】Select组件

2017-04-21 22:31 323 查看

demo效果展示

代码

<body>
<div id="demo">
<custom-select :searchtext="searchtext" :listdata="list"></custom-select>
</div>
<script>
Vue.component('customSelect',{
data:function(){
return {
showlist:false,
value:''
}
},
props:['searchtext','listdata'],
template:`<section class="warp">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyWord" :value="value" />
<input type="button" :value="searchtext"
@click="showlist = !showlist">
<span></span>
</div>
<customList v-show="showlist" @showinput="showinput" :items="listdata"></customList>
</div>
</section>`,
methods:{
showinput:function(item){
this.value = item;
}
}
});
Vue.component('customList',{
props:["items"],
template:`<ul class="list">
<li v-for="item in items" @click="showitem(item)">{{item}}</li>
</ul>`,
methods:{
showitem:function(item){
this.$emit('showinput',item)
}
}
});
new Vue({
el:'#demo',
data: {
searchtext:"查询",
list:['vue.js','angular.js','react.js']
}
})
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航