IMWeb训练营作业 select

来源：互联网发布：nba2kol伦纳德2017数据编辑：程序博客网时间：2024/05/16 04:05
这里写图片描述
<!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"></script>    </head><body>    <div id="app">            <h2>自定义的下拉框</h2>            <!--符合w3c的规定，即table里边只能放tr，tr里边只能放td,使用is对其扩展-->            <!--<table><tr is="custom-select">-->            <custom-select btn-value="查询" v-bind:list="list1"></custom-select>            </tr></table>            <h2>自定义的下拉框2</h2>            <table><tr>            <custom-select btn-value="搜索" v-bind:list="list2"></custom-select>            </tr></table>        </div>        <!--<div id="app1">            <custom-select></custom-select>        </div>-->    <script>        //注册组件：全局注册        //当有对象改变的时候，其他组件也都发生改变        var obj={                    selectShow:false                }            Vue.component("custom-select",{                //组件中的data必须是函数                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" :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;                    }                }        })        //注册组件：局部注册        /*new Vue({            el:"#app",            components:{                "custom-select":{                    template:                        `<section class="warp">                                <div class="searchIpt clearFix">                                    <div class="clearFix">                                        <input type="text" class="keyWord" value="" />                                        <input type="button" value="查询">                                        <span></span>                                    </div>                                    <ul class="list">                                        <li>html+css</li>                                        <li>html5+css3</li>                                        <li>javascript</li>                                        <li>angular</li>                                        <li>react</li>                                        <li>vue</li>                                        <li>jquery</li>                                        <li>nodejs</li>                                    </ul>                                </div>                            </section>`                }            }        })*/        // new Vue({        //     el:"#app1"        // })            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){                    //在自组建中有交互，点击li在text中显示                    //告知父级改变val的值,需要触发一个自定义事件                    this.$emit("receive",item);                }            }        })        new Vue({            el:"#app",            data : {                list1:["北京","上海","杭州"],                list2:["top","head","body"]            }        })    </script></body></html>
0 0