vue添加删除展示

    vue页面：

<template>

<div>

<div v-for="v in name" :key="index">

<tr>

<td>姓名：{{v.user_name}}</td>

<td>手机号：{{v.address_tel}}</td>

<td>地址：{{v.address}}</td><button @click="del(v.id)">删除</button><button @click="amend(v.id)">修改</button>

</tr>



</div>

<button @click="add()">添加</button>

</div>

</template>

<script>

export default {

data () {

return {

name: {}

}

},

mounted: function () {

this.load()

},

methods: {

load () {

let t = this

wx.request({

url: 'http://xiaochengxu.com/address',

data: {

},

header: {

'content-type': 'application/json'

},

success (res) {

t.name = res.data

}

})

},

add () {

wx.navigateTo({

url: '/pages/address/main'

})

},

del (id) {

wx.request({

url: 'http://localhost/xm/blog/public/index.php/api/del/' + id + '',

header: {

'content-type': 'application/json'

},

success (res) {

wx.navigateTo({

url: '/pages/index/main'

})

}

})

},

amend (id) {

this.$router.push('index')

this.$router.push({

path: './pages/amend/main',

query: {

nameId: id}

})

}

}

}

</script>

添加：

<template>

<div class="main">

<div class="content">

<input type="text" placeholder="收货人姓名（请输入真实姓名）" v-model="user_name">

</div>

<div class="content">

<input type="text" placeholder="手机号码" v-model="address_tel">

</div>

<div class="content">

<input type="text" placeholder="所在地址" v-model="address">

</div>

<div class="content">

<input type="text" placeholder="街道、小区门牌等详细地址" v-model="address_info">

</div>

<div class="content">

<div class="address"><h1>设置为默认地址</h1>

<switch checked bindchange="switch1Change"/></div>

</div>

<div class="bottom"><h4 @click="add()">保存</h4></div>

</div>

</template>

<script>

export default {

data () {

return {

user_name: '',

address_tel: '',

address: '',

address_info: ''

}

},

methods: {

add () {

var datas = {}

datas.user_name = this.user_name

datas.address_tel = this.address_tel

datas.address = this.address

datas.address_info = this.address_info

if (!this.user_name) {

wx.showToast({

title: '请输入名字',

icon: 'none',

duration: 1500

})

return false

}

if (!this.address_tel) {

wx.showModal({

title: '提示',

content: '请输入联系电话',

showCancel: false,

success (res) {

if (res.confirm) {

console.log('点击确定')

} else if (res.cancel) {

console.log('点击取消')

}

}

})

return false

}

if (!this.address) {

wx.showToast({

title: '请输入地址',

icon: 'none',

duration: 1500

})

return false

}

if (!this.address_info) {

wx.showToast({

title: '请输入详细地址',

icon: 'none',

duration: 1500

})

return false

}

wx.request({

url: 'http://localhost/xm/blog/public/index.php/address',

method: 'post',

header: {

'content-type': 'application/json'

},

data: {

user_name: this.user_name,

address_tel: this.address_tel,

address: this.address,

address_info: this.address_info

},

success (res) {

console.log(res.data)

wx.navigateTo({

url: '/pages/index/main'

})

}



})

}

}

}

</script>