vue做一個上移和下移，刪除的li 功能

效果圖：

思路就是冒泡原理，把數據放到一個空數組，對其進行排序, 單選框用到的是iview 。

具體實現代碼：

 <div v-for="item in singledLists" :key="item.index" >   // 數組singledLists
            <Checkbox @on-change="checkSingle" :disabled="isDisabled" v-model="item.isRight" class="mb10" >
                <Input  :value="item.content" v-model="item.content" style="width: 300px;marginLeft:.4rem;" />   // item.content 動態設置input
            </Checkbox>
            <span style="cursor:pointer;" @click="moveUp(item)">上移</span>
            <span style="cursor:pointer;" @click="moveDown(item)">下移</span>
            <span style="cursor:pointer;" @click="singleAnswerDelete(item)">刪除</span>
</div>

<div class="ml30"><Button class='newColor' @click="addSingleAnswer" :class="{'hideButton':isShow}" type="primary">添加選項</Button></div>  // hideButton{dispaly:none} 控制顯示和隱藏 ,isShow:false ;

 // 添加

// 添加答案選項
        addSingleAnswer() {
          let _this = this;
          _this.singledLists.push({});   // 置空
          if (_this.questionStyle === "single") {
            if (_this.singledLists.length >= 4) {
              _this.isShow = true; //隱藏按鈕添加選項  
              _this.$Message.info("單選題最多添加四個選項！");
            }
          } else if (_this.questionStyle === "multi") {
            if (_this.singledLists.length >= 6) {
              _this.isShow = true; //隱藏按鈕添加選項
              _this.$Message.info("多選題最多添加六個選項！");
            }
          }
        },

 

 

// 以B為基點上移 (根據index值)
    moveUp(item) {
          console.log(item)
          console.log(this.singledLists)
          let index = this.singledLists.indexOf(item);  // 獲取的index。或者通過v-for 遍歷傳過的index，可以簡化此步驟。 if (this.singledLists.length > 1 && index !== 0) {
            var temp = this.singledLists[index - 1].content;      // 這三行的含義可見上面示意圖
            this.singledLists[index - 1].content = this.singledLists[index].content;
            this.singledLists[index].content = temp;
          }
     },

// 下移
        moveDown(item) {
          let index = this.singledLists.indexOf(item);
          if( this.singledLists.length > 1 && index != this.singledLists.length - 1 ) {
            var temp = this.singledLists[index + 1].content;     // 以c為基點 this.singledLists[index + 1].content = this.singledLists[index].content;
            this.singledLists[index].content = temp;
          }
        },
        // 刪除
        singleAnswerDelete(item) {
          this.isShow = false;
          let index = this.singledLists.indexOf(item);
          if (index > -1) {
            this.singledLists.splice(index, 1);
          }
        },