[Vue] <li> 순환 중에 회전하여 항목 기호로 만든 십자 키로 초점을 맞추는 바람의 행동</li>
on CodePen .
행동의 확인 방법, 보기만 하면 사랑을 베기 때문이다.
입력란에 조사하고 싶은 것을 입력할 때 검색 결과가 아래에 나타나는 유형의 행동(구글의 예측 변환과 같은 느낌)을 구상하여 만든 것이다.
이번에는 실제 초점이 아니라 CSS에서 비슷한 것을 찾았을 뿐이다.
for 문장으로 리스트를 순환하는 것이지만 각자 다른 스타일에 어떻게 적응할 것인가... 이 부분은 상당히 고전적이다p>
간단한 코드니까 꼭 읽어보세요.
거미가 되는 부분이 여기 있어요.p>
<ul v-for="(v,k) in users">
<li :class="{change:currentIndex === k}">{{ v }}</li>
</ul>
순환 중 생성된 모든 목록 탭에 이
:class 를 추가하면 currentIndex === k 목록을change 클래스로 변경합니다p> var vm = new Vue({
el: '#app',
data: {
users: [ '太郎', '次郎', '三郎', '四郎', '五郎'],
currentIndex : -1,
},
methods: {
moveDown() {
this.currentIndex = this.currentIndex + 1;
},
moveUp() {
if(this.currentIndex > -1){
this.currentIndex = this.currentIndex - 1;
}
},
}
});
currentIndex는 초기 값을 -1로 설정하고 위아래 화살표 키를 통해 화를 내는 moveDown 방법, moveUp 방법으로 각각 1개의 수치를 변경합니다.
수치 변경 후의currentIndex는users를 각각 꺼낼 때의 키 "k"와 비교하여 같은 물건이 있는 곳에서만 클래스를 변경한다p>
순환 중에 생성된 목록 라벨 중 하나에 반을 추가하는 방법을 고민했지만 동적 변화를 모두 할 수 있다면 좋겠다는 것을 배웠습니다.
오늘은 이게 다야.감사합니다.p>
속편
글머리 기호에서 선택한 요소의 속편은 여기
Reference
이 문제에 관하여([Vue] <li> 순환 중에 회전하여 항목 기호로 만든 십자 키로 초점을 맞추는 바람의 행동</li>), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/pon_maeda/items/bcd2252c90c044b31f2f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
