Vue實(shí)現(xiàn)點(diǎn)擊箭頭上下移動(dòng)效果
更新時(shí)間：2020年06月11日 10:11:37 作者：luckylbb
這篇文章主要介紹了Vue實(shí)現(xiàn)點(diǎn)擊箭頭上下移動(dòng)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
<body>
<div id="app">
<ul>
<li v-for="(item,i) in list">{{item.name}}
//i<list.length-1 需要的是0,1,2,3 需要四個(gè)向上的箭頭 長(zhǎng)度為5 減1之后長(zhǎng)度為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>
$set（檢測(cè)數(shù)組的變動(dòng)）
附錄：vue點(diǎn)擊實(shí)現(xiàn)箭頭的向上與向下
html代碼
<span class="iconfont icon-jiantouarrow486" v-if="show" @click="ptOpenDowOrUp()"></span> <span class="iconfont icon-jiantouarrow492" v-else></span>
vue .js部分
var vm = new Vue({
el:'#app',
data:{
show:true,
},
methods:{
ptOpenDowOrUp:function () {
vm.show = !vm.show
},
}
})
總結(jié)
到此這篇關(guān)于Vue實(shí)現(xiàn)點(diǎn)擊箭頭上下移動(dòng)效果的文章就介紹到這了,更多相關(guān)vue 點(diǎn)擊箭頭上下移動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue中使用this.$store或者是$route一直報(bào)錯(cuò)的解決
今天小編就為大家分享一篇在Vue中使用this.$store或者是$route一直報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
關(guān)于ElementUI自定義Table支持render
這篇文章主要介紹了關(guān)于ElementUI自定義Table支持render，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
使用v-for指令的時(shí)候遇到一個(gè)錯(cuò)誤問(wèn)題，具體錯(cuò)誤代碼在文章給大家列出，對(duì)vue v-for使用問(wèn)題感興趣的朋友跟隨小編一起學(xué)習(xí)吧2019-08-08
VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問(wèn)題
這篇文章主要介紹了VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)下拉表格組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
MVVM 是Model-View-ViewModel 的縮寫(xiě)，它是一種基于前端開(kāi)發(fā)的架構(gòu)模式，Vue.js 是一個(gè)提供 MVVM 風(fēng)格的雙向數(shù)據(jù)綁定的 Javascript 庫(kù)，專(zhuān)注于View 層。這篇文章給大家介紹Vue.js 和 MVVM 的注意事項(xiàng)，感興趣的朋友一起看看吧2016-11-11
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
這篇文章主要介紹了Vue.js 2.0 和 React、Augular等其他前端框架大比拼的相關(guān)資料,React 和 Vue 有許多相似之處,本文給大家提到，需要的朋友可以參考下2016-10-10
這篇文章主要介紹了vue項(xiàng)目打包步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了vue設(shè)置默認(rèn)首頁(yè)的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08