A veces necesitamos darnos cuenta de la posición de desplazamiento de los elementos de la lista hacia arriba y hacia abajo. Representamos los datos de la matriz en la vista, y las funciones de desplazamiento hacia arriba y hacia abajo se pueden realizar intercambiando las posiciones de los elementos de la matriz.
Uno, la lista de matrices que se moverán
data() {
return {
questionList: [
{ question: "第一个问题？" },
{ question: "第二个问题？" },
{ question: "第三个问题？" },
{ question: "第四个问题？" },
{ question: "第五个问题？" },
],
};
},Dos, mover hacia arriba, mover hacia abajo función
methods: {
// 上移
clickUp(index) {
let arr = this.questionList;
arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
},
// 下移
clickDown(index) {
let arr = this.questionList;
arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
},
},Tres, el efecto
Cuatro, atencion
Cuando el elemento está en la primera posición, está prohibido seguir subiendo, y cuando el elemento está en la última posición, está prohibido seguir bajando. Agregamos el atributo deshabilitado al botón, y el índice es el índice en la vista de representación de bucle for
<div v-for="(item, index) in questionList" :key="index">
<p>{
{item.question}}</p>
<div class="btns">
<!-- 上移 -->
<Button :disabled="index == 0" @click="clickUp(index)"></Button>
<!-- 下移 -->
<Button :disabled="index == questionList.length - 1" @click="clickDown(index)"></Button>
</div>
</div>Los artículos se actualizan continuamente cada semana. Puede buscar " Colección de aplicaciones para el usuario " en WeChat para leerlo por primera vez, responder a [ Video ] [ Libro ] para recibir materiales de video de 200G y 30 materiales de libros en PDF
