java中三種常見記憶體溢位錯誤的處理方法
阿新 • • 發佈：2020-08-28
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <h2>自定義的下拉框</h2><custom-select btn='查詢' v-bind:list="list1"></custom-select> <h2>自定義的下拉框2</h2> <custom-select btn='搜尋' v-bind:list="list2"></custom-select> </div> </body> <script> //註冊元件 Vue.component("custom-select",{ data:function(){ return{ selectShow:false, val:"" } }, props:["btn","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" :value="btn" /> <span></span> </div> <custom-list v-show="selectShow" :list=list v-on:receive="changeValueHandle" ></custom-list> </div> </section> `, methods:{ changeValueHandle(value){ this.val=value; } } }) Vue.component("custom-list",{ props:["list"], template: ` <ul class="list" v-show='selectShow'> <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:["20-05-06","20-06-30","20-07-05","20-08-12","20-08-23",] } }) </script> </html>