程序博客网 > 网站通用域名有用吗

【IMWeb训练营作业】Vue.js入门练习demo之select下拉菜单

来源：互联网发布：网站通用域名有用吗编辑：程序博客网时间：2024/06/07 07:24

主要学习父子组件的通信问题

1.父 ->子使用props属性

2.子->父使用自定义事件

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="vue.js"></script></head><body><div id="app"><my-select :list-data="listData"></my-select></div><script>Vue.component('my-select',{props:['listData'],data(){return {isShow:false,value:'',}},template:`<section><div><input type="text"  @click="isShow=!isShow"  :value="value"  placeholder="请选择"/><button>提交</button></div><list :list-data="listData" :is-show="isShow" v-on:selectValue="getValue"></list></section>`,methods:{getValue(value){this.value = value;this.isShow = false;},},})Vue.component('list',{props:[ 'listData' ,'isShow'],data(){return {}},template:`<ul v-show="isShow"><li v-for="item in listData" @click="selectValue(item)" >{{item}}</li></ul>`,methods:{selectValue(value){this.$emit('selectValue',value);},}})new Vue({el:'#app',data:{listData:['北京',"上海","广州"],},})</script></body></html>

0 0

网站通用域名有用吗

网站通用域名有用吗

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子性格太安静内向怎么办长得不好自卑怎么办特别自卑的人怎么办孩子胆小怕老师怎么办孩子有分离焦虑怎么办新生入园哭闹怎么办严重的湿热体质怎么办患了焦虑症怎么办得了严重焦虑症怎么办老年人有焦虑症怎么办焦虑症发病时怎么办焦虑症老是复发怎么办焦虑症引起头晕怎么办小孩记忆力太差怎么办 43岁记忆力不好怎么办脑梗压迫眼睛怎么办手机买贵了怎么办工作辞职了社保怎么办通用卷无法停止怎么办 cf卡顿原地怎么办 cf一直卡顿怎么办 cf出现卡顿怎么办在家玩cf卡怎么办玩cf一卡一卡的怎么办谷歌地球打不开怎么办 cad字体显示问号怎么办视频旋转后变形怎么办手上长鸡眼怎么办去除 eve星城爆了旗舰怎么办 zte手机不开机怎么办 touch密码忘了怎么办苹果7出现itunes怎么办 touch id忘记了怎么办 java无jre目录怎么办孕妇anti-tg偏高怎么办 win10迈克菲过期怎么办股票停牌了怎么办股东卡丢了怎么办网上开户股东卡怎么办 st退市股票怎么办心电图st段改变怎么办