이제 Vue.js를 사용하여 선택 드롭다운 목록을 만드는 예를 공유하겠습니다(ul-li 태그는 선택 태그를 모방함). 이는 좋은 참조 값을 가지며 모든 사람에게 도움이 되기를 바랍니다.
목표: Vue.js 지식과 결합된 ul-li 태그를 사용하여 선택 태그를 모방하는 드롭다운 옵션 목록을 만듭니다.
지식:
컴포넌트 작성 및 사용 방법
컴포넌트 간 데이터 전송(props 사용)
컴포넌트 간 데이터 전송($emit Application)
동적 데이터 바인딩(v-bind)
맞춤형 이벤트 통신
렌더링:
1. 어떤 작업을 수행하기 전 드롭다운 목록은 숨겨진 상태입니다
2. 입력 상자를 클릭하면 드롭다운 목록이 표시됩니다.
3. 목록 항목을 클릭하면 입력 상자 값이 그에 따라 변경됩니다.
PS: 두 세트의 바인딩을 보여줍니다. data1 및 data2 중 두 개의 목록이 예제
html 코드에서 생성되었습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ul-li模仿select下拉菜单</title> <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" /> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <p id="demo"> <my-select btn-name='search' v-bind:list='data1' style='float: left;margin-right: 2rem;'></my-select> <my-select btn-name='搜索' v-bind:list='data2' style='float: left;'></my-select> </p> </body> </html>
JavaScript 코드
<script type="text/javascript"> //注册全局组件 //在my-select组件中套用ul-select组件,my-select为父组件ul-select为子组件 Vue.component('my-select', { //组件中data要写成函数形式 data() { return { ulShow: false, //默认ul不显示,单击input改变ul的显示状态 selectVal: '' //选项值,input的值与选项值动态绑定 } }, //父组件向子组件通信用props props: ['btnName', 'list'], template: ` <p id="selectWrap"> <p class="searchBox"> <input type="text" :value="selectVal" @click='ulShow = !ulShow'/> <a href="#" rel="external nofollow" class="search" v-text='btnName'></a> </p> <my-ul v-show='ulShow' v-bind:list='list' v-on:receive='changeVal'></my-ul> </p> `, methods: { changeVal(value) { this.selectVal = value } } }) //子组件 Vue.component('my-ul', { props: ['list'], template: ` <ul class="skill"> <li v-for='item of list' v-on:click='selectLi(item)'>{{item}}</li> </ul> `, methods: { selectLi: function(item) { //$emit触发当前实例上的自定义事件 receive this.$emit('receive', item); } } }) //创建Vue实例 new Vue({ el: '#demo', //定义两组数据分别传递到两个组件的li中,两个列表的操作互不影响 data: { data1: ['CSS', 'HTML', 'JavaScript'], data2: ['Vue.js', 'Node.js', 'Sass'], } }) </script>
CSS 스타일
ul, li { margin: 0; padding: 0; list-style: none; } #selectWrap { width: 250px; padding: 2rem; background: #4682b4; } .searchBox input, .searchBox a { line-height: 1.5rem; height: 1.5rem; margin-bottom: 1rem; padding: 0 5px; vertical-align: middle; border: 1px solid #aaa; border-radius: 5px; outline: none; } .searchBox a { display: inline-block; text-decoration: none; background-color: #b1d85c; } .skill li { font-size: 18px; line-height: 2rem; height: 2rem; padding-left: 5px; cursor: pointer; } .skill li:hover { background-color: #008b45; }
위는 제가 여러분을 위해 컴파일한 것입니다. 앞으로도 도움이 되길 바랍니다.
관련 기사:
vue-router에서 쿼리 동적 매개변수 전달 문제 해결
nodejs에서 mysql 데이터베이스에 대한 연결 및 기본 지식 포인트에 대한 자세한 설명
위 내용은 Vue.js를 통해 선택 드롭다운 목록을 구현하는 방법, 구체적인 작업은 다음과 같습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!