No Vue, você pode atualizar a interface ouvindo as alterações no array. VueFornece alguma sintaxe especial e APIpara monitorar a matriz.
Aqui estão algumas maneiras comuns de monitorar alterações de array:
push(): Adicionar um ou mais novos elementos ao final do array;
pop(): Remover o último elemento do array; :
shift()Remover o primeiro elemento do array;
unshift(): Adicionar um ou mais novos elementos ao início do array;
splice(): Adicionar ou remover elementos ao array. Este método tem vários usos;
sort(): Ordena os elementos do array;
reverse(): Inverte os elementos do array.
Além disso, Vuetambém fornece um método especialmente usado para monitorar alterações de array Vue.sete arquivos Vue.delete.
Aqui está um exemplo simples que demonstra como Vueouvir alterações em uma matriz em .
<template>
<div>
<h2>动态列表</h2>
<ul>
<li v-for="(item, index) in list" :key="index">
{
{
item }}
<button @click="remove(index)">删除</button>
</li>
</ul>
<input type="text" v-model="newItem" />
<button @click="add">添加</button>
</div>
</template>
<script>
export default {
data() {
return {
list: ['苹果', '香蕉', '西瓜'],
newItem: '' // 用于保存输入框中的新元素
};
},
methods: {
add() {
this.list.push(this.newItem); // 数组末尾添加新元素
this.newItem = ''; // 清空输入框中的内容
},
remove(index) {
this.list.splice(index, 1); // 移除指定位置的元素
}
}
};
</script>
No código acima, definimos uma lista e uma caixa de entrada e adicionamos um botão. Quando houver conteúdo na caixa de entrada, clique no botão Adicionar para adicionar o conteúdo da caixa de entrada à lista. Há também um botão de exclusão ao lado de cada elemento da lista, clique no botão para remover o elemento correspondente. Observe que usamos v-fora diretiva para iterar na lista, usando :keyo atributo para especificar um identificador exclusivo para cada elemento. Toda a lógica é methodsimplementada no atributo, e quando os dados da página mudarem, Vuea interface será atualizada automaticamente.