组件select
页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/select.css"/>
</head>
<body>
<div id="select">
<div>
<p>搜索框1</p>
<vue-select select-btn="查查看" :list="list1"></vue-select>
</div>
<div>
<p>搜索框2</p>
<vue-select select-btn="搜索" :list="list2"></vue-select>
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/select.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
js代码
Vue.component("vue-select",{
props:["selectBtn","list"],
data:function(){
return {
showSelect:false,
btnValue :this.selectBtn,
val:''
}
},
template:`
<div class="select">
<input type="text" placeholder="请点击选择" @click="showSelect=!showSelect" :value="val"/>
<input type="button" :value="btnValue" />
<select-list v-show="showSelect" :list2=list @receive="changeValue"></select-list>
</div>
`,
methods:{
changeValue:function (value){
this.val = value;
}
}
})
Vue.component("select-list",{
props:["list2"],
template:`<ul :list="list2">
<li v-for="item in list2" @click="setSelectValue(item)">{{item}}</li>
</ul>`,
methods:{
setSelectValue:function(item){
this.$emit("receive",item);
}
}
}
);
var vm = new Vue({
el:"#select",
data:{
list1:["北京","上海","南京","杭州"],
list2:["艺术体操","游泳","画画","羽毛球"]
}
});
效果图
237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
