在v-text-field中使用v-chip可以通过以下步骤实现:
<template>
<div>
<v-text-field v-model="inputText" label="输入文本"></v-text-field>
<v-chip v-for="(chip, index) in chips" :key="index" @click="removeChip(index)">
{{ chip }}
</v-chip>
</div>
</template>
<script>
export default {
data() {
return {
inputText: '',
chips: []
};
},
methods: {
removeChip(index) {
this.chips.splice(index, 1);
}
}
};
</script>
<template>
<div>
<v-text-field v-model="inputText" label="输入文本" @keyup.enter="addChip"></v-text-field>
<v-chip v-for="(chip, index) in chips" :key="index" @click="removeChip(index)">
{{ chip }}
</v-chip>
</div>
</template>
<script>
export default {
data() {
return {
inputText: '',
chips: []
};
},
methods: {
addChip() {
if (this.inputText.trim() !== '') {
this.chips.push(this.inputText);
this.inputText = '';
}
},
removeChip(index) {
this.chips.splice(index, 1);
}
}
};
</script>
这样,你就可以在v-text-field中使用v-chip了。用户可以在v-text-field中输入文本,按下回车键后,会将文本作为chip显示在页面上。点击chip可以删除对应的chip。
领取专属 10元无门槛券
手把手带您无忧上云