您的位置:首页 > 产品设计 > UI/UE

vue 点击增加 增加一行空数组

2018-01-25 10:00 2171 查看
<template>
<div>
<div @click="add" style="margin-top:30px">新增</div>
<div v-for="(name, index) in form" :key="index">
<input v-model="name.text" type="text">
<div class="delete" @click="deleteItem(index)">删除</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
data() {
return {
form: [
{ text: '111', type: 'sdfas' },
{ text: '222', type: 'sdfas' },
{ text: '333', type: 'sdfas' },
{ text: '444', type: 'sdfas' }
]
}
},
methods: {
add() {
console.log('add')
this.form.push({ text: this.form.length, type: 'sdfas' })
},
deleteItem(index) {
this.form.splice(index, 1)
console.log(index)
}
},
beforeRouteLeave(to, from, next) {
this.$destroy()
next()
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: