您的位置：首页 > 其它

IMWeb训练营作业----select

2017-04-21 16:15 323 查看

先上效果图

然后这是分享的源码

链接：http://pan.baidu.com/s/1dFafWWx 密码：73v3

然后贴出html代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div style="float: left;">
<h2>自定义的下拉框</h2>
<custom-select btn-value="查询" v-bind:list="list1"></custom-select>
</div>
<div style="float: left;">
<h2>自定义的下拉框222</h2>
<custom-select btn-value="搜索" v-bind:list="list2"></custom-select>
</div>
</div>
<script type="text/javascript">
Vue.component("custom-select", {
data: function() {
return {
selectShow: false,
val:""
}
},
props: ["btnValue","list"],
template: ` <section class="warp">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyWord" :value="val" @click="selectShow = !selectShow" />
<input type="button" v-bind:value="btnValue">
<span></span>
</div>
<custom-list
v-show="selectShow"
:list="list"
v-on:receive="changeValueHandle"
></custom-list>
</div>
</section>`,
methods:{
changeValueHandle(value){
alert("我被触发了，值为："+ value)
this.val = value
}
}
})

Vue.component("custom-list", {
props:["list"],
template: `<ul class="list">
<li v-for="item of list" @click="selectValueHandle(item)">{{item}}</li>
</ul>`,
methods:{
selectValueHandle:function(item){
//在子组件中有交互,告知父级，改变val的值，需要出发自定义事件
this.$emit("receive",item)
}
}
})

new Vue({
el: "#app",
data: {
list1: ["北京", "上海", "广州", "杭州"],
list2: ["17-02-12", "17-03-23", "07-09-09"]
}
})
</script>
</body>
</html>

做完后的一些感想：虽然代码量不大，逻辑也不是很复杂，但是由于对vue的语法还是比较陌生的（至少相比js,jq而言），所以做的时候总是不停的调试，做的时间起码是视频播放时间的2倍，有点慢哈。不过调试是学习一门新框架或语言的必经之路。自己挖的坑就自己填，总有些坑，自己踩过才会印象深刻。

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

标签：

相关文章推荐

新的分享

章节导航