Vue 클릭 화살표 상하 이동 효과 구현
<body>
<div id="app">
<ul>
<li v-for="(item,i) in list">{{item.name}}
//i<list.length-1 0,1,2,3 5 1 4 4 0,1,2,3
<button v-show="i<list.length-1" @click="down(i)">↓</button>
<button v-show="i>0" @click="up(i)">↑</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.config.productionTip = false//
new Vue({
el: "#app",
data() {
return {
list:[
{id:111,name:"aaa"},
{id:222,name:"bbb"},
{id:333,name:"ccc"},
{id:444,name:"ddd"}
]
}
},
methods:{
down(i){
let temp = this.list[i]
this.$set(this.list,i,this.list[i+1])
this.$set(this.list,i+1,temp)
},
up(i){
let temp = this.list[i]
this.$set(this.list,i,this.list[i-1])
this.$set(this.list,i-1,temp)
}
}
})
</script>
</body>부록:vue 클릭 하여 화살표 의 위로 와 아래로
html 코드
<span class="iconfont icon-jiantouarrow486" v-if="show" @click="ptOpenDowOrUp()"></span>
<span class="iconfont icon-jiantouarrow492" v-else></span>
var vm = new Vue({
el:'#app',
data:{
show:true,
},
methods:{
ptOpenDowOrUp:function () {
vm.show = !vm.show
},
}
})Vue 가 클릭 화살표 의 상하 이동 효 과 를 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 클릭 화살표 의 상하 이동 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
