【IMWeb训练营作业】Select

来源：互联网发布：明源软件怎么样编辑：程序博客网时间：2024/05/22 14:55

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

<!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>

0 0