Vue.js 에서 select 드 롭 다운 목록 의 인 스 턴 스 를 만 듭 니 다(ul-li 탭 은 select 탭 을 모방 합 니 다)
지식 포인트:
구성 요소 의 쓰기 및 활용
구성 요소 간 데이터 전달(props 활용)
구성 요소 간 데이터 전달($emit 활용)
동적 데이터 바 인 딩(v-bind)
사용자 정의 이벤트 통신
효과 그림:
1.아무런 조작 도 하지 않 기 전에 드 롭 다운 목록 은 숨겨 진 상태 입 니 다.
2、입력 상 자 를 클릭 하여 드 롭 다운 목록 표시
3,목록 항목 을 클릭,입력 상자 값 에 따라 변경
PS:데이터 1,데이터 2 두 그룹의 데이터 연결 을 보 여주 기 위해 실례 에서 두 개의 목록 을 만 들 었 습 니 다
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>
<div 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>
</div>
</body>
</html>
<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: `
<div id="selectWrap">
<div class="searchBox">
<input type="text" :value="selectVal" @click='ulShow = !ulShow'/>
<a href="#" rel="external nofollow" class="search" v-text='btnName'></a>
</div>
<my-ul v-show='ulShow' v-bind:list='list' v-on:receive='changeVal'></my-ul>
</div>
`,
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>
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;
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
LaravelAPI + Nuxt로 MultiAuth 구현현재 SIer5년째로 javascript(Jquery만), PHP(프레임워크 없음)를 2년 정도, C#(Windows 앱) 3년 정도 왔습니다. 여러가지 인연이 있어, 개인으로 최근 웹 서비스의 시작을 하게 되었습니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
