<template>
 <div>
  <!-- 調(diào)用組件 -->
  <draggable element="ul" v-model="listdata">
   <li v-for="item in listdata">{{item.name}}</li>
  </draggable>
  <!-- 展示list數(shù)據(jù)效果 -->
  {{listdata}}
 </div>
</template>
 
<script>
import draggable from 'vuedraggable'
export default {
 name: 'draggabletest',
 components: { 
  draggable,
 },
 data () {
  return {
   listdata:[
    {
     id: 1,
     name: '葉落森1'
    },
    {
     id: 2,
     name: '葉落森2'
    },
    {
     id: 3,
     name: '葉落森3'
    },
    {
     id: 4,
     name: '葉落森4'
    },
    {
     id: 5,
     name: '葉落森5'
    }
   ]
  }
 },
}
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue 使用 echarts 繪制中國(guó)地圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 使用 echarts 繪制中國(guó)地圖,內(nèi)容包括插入echarts所需模塊及完整的代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-01-01
el-form的label和表單自適應(yīng)填滿一行且靠左對(duì)齊方式
這篇文章主要介紹了el-form的label和表單自適應(yīng)填滿一行且靠左對(duì)齊方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
解決element-ui el-checkbox的一些坑
這篇文章主要介紹了解決element-ui el-checkbox的一些坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
在nginx上部署vue項(xiàng)目(history模式)的方法
vue-router 默認(rèn)是hash模式，使用url的hash來(lái)模擬一個(gè)完整的url，當(dāng)url改變的時(shí)候，頁(yè)面不會(huì)重新加載。這篇文章主要介紹了在nginx上部署vue項(xiàng)目(history模式),需要的朋友可以參考下
2017-12-12
vue3+Echarts頁(yè)面加載不渲染顯示空白頁(yè)面的解決
這篇文章主要介紹了vue3+Echarts頁(yè)面加載不渲染顯示空白頁(yè)面的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁(yè)面更快響應(yīng))
這篇文章主要介紹了Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁(yè)面更快響應(yīng)),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
Vue 2.0學(xué)習(xí)筆記之Vue中的computed屬性
本篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之Vue中的computed屬性，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
詳解Vue.js Class與Style綁定
這篇文章主要為大家介紹了Vue.js Class與Style綁定的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-01-01
vue-admin-template?動(dòng)態(tài)路由的實(shí)現(xiàn)示例
本文主要介紹了ue-admin-template動(dòng)態(tài)路由的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
vue-resource 攔截器interceptors使用詳解
這篇文章主要介紹了vue-resource 攔截器interceptors使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01