【IMWeb训练营作业】Select

最新推荐文章于 2017-04-25 11:48:05 发布

gh467360442

最新推荐文章于 2017-04-25 11:48:05 发布

阅读量228

点赞数

本文链接：https://blog.csdn.net/gh467360442/article/details/70344788

版权

本节课用到了自定义组件，父子组件的通信以及动态绑定值，未添加样式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Select</title>
	<script src="js/vue.js"></script>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		ul{list-style: none;float: left;}
		.section1{margin:200px 100px 0px 400px; }
		.section2{margin: 200px 0px 0px 100px; }
	</style>
</head>
<body>
  <div id="app">
  	<div style="float: left;" class="section1">
  		<custom-select btn="查询" :list="list1"></custom-select><!--自定义组件-->
  	</div>
  	<div style="float: left;" class="section2">
  		<custom-select btn="搜索" :list="list2"></custom-select>
  	</div>
  </div>
  <script>
  	//全局组件
  	Vue.component("custom-select",{
  		data:function(){
  			return{
  				selectShow:false,//自定义点击显示
  				val:""//自定义value
  			}
  		},
  		props:["btn","list"],//父组件向子组件传递数据需要用props
  		//组件模板
  		template:`<section> 
  		<div>
  		<input type="text" class="inputSelect" :value="val" @click="selectShow=!selectShow">
  		<input type="button" :value="btn">
  	</div>
  		<custom-ul v-show="selectShow" :list="list" @receive="changeValue"></custom-ul>
  	</section>`,
  		//自定义方法，改变input中value的值
  		methods:{
  			changeValue:function(value){
  				this.val=value
  			}
  		}
  	})
    
    //ul子组件
    Vue.component("custom-ul",{
    	props:["list"],
    	template:`<ul>
  		<li v-for="item in list" @click="getValue(item)">{{item}}</li>
  	</ul>`,
  		methods:{
  			getValue:function(item){
  				//子组件中点击告诉父组件改变val的值,需要触发自定义事件
  				this.$emit("receive",item)


  			}
  		}
    })

  	new Vue({
  		el:"#app",
  		data:{
  			list1:["111","222","333"],
  			list2:["555","666","777"]
  		}
  	});
  </script>
</body>
</html>