1、引入JS

<!--bootstrap-->
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue-resource-->
<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>

2、列表

<div id="app">
	<div class="panel panel-primary">
	    <div class="panel-heading">
	        <h3 class="panel-title">添加品牌</h3>
	    </div>
	    <div class="panel-body form-inline">
	        <label>ID:
	            <input type="text" class="form-control" v-model="id">
	        </label>
	        <label>名称:
	            <input type="text" class="form-control" v-model="name">
	        </label>
	        <input type="button" value="添加" class="btn btn-primary" @click="add">
	    </div>
	</div>

	<table class="table table-bordered table-hover table-striped">
	    <thead>
	        <tr>
	            <td>ID</td>
	            <td>名称</td>
	            <td>时间</td>
	            <td>操作</td>
	        </tr>
	    </thead>
	    <tbody>
	        <tr v-for="item in list" :key="item.id">
	            <td>{{ item.id }}</td>
	            <td v-text="item.name"></td>
	            <td>{{ item.ctime }}</td>
	            <td><a href="" @click.prevent="del(item.id)">删除</a></td>
	        </tr>
	    </tbody>
	</table>
</div>

3、接口信息

URL：http://**/bing/addprodinfo

4、请求接口数据

var vm=new Vue({
    el:'#app',    
    data:{    
        id:'',    
        name:'',    
        list:[    
            // {id:1,name:'奔驰',ctime:new Date()},    
            // {id:2,name:'宝马',ctime:new Date()}    
        ]    
    },    
    created(){    
        this.getAllList()    
    },    
    methods:{    
        add(){    
            //参数。1-请求url、2-提交数据、3-提交表单类型    
            this.$http    
                .post('http://***/bing/addprodinfo',{name:this.name},{emulateJSON:true})    
                .then(result=>{    
                    if(result.body.status===0) {    
                        this.getAllList()    //重新加载
                        this.name=''    	//重置name
                    }else {    
                        alert('添加失败！')    
                    }    
                })    
        },    
        del(id){    
           this.$http
               .get('http://***/bing/delprodinfo')
               .then(result=>{
                   if(result.body.status===0){
                       this.getAllList()
                   }else{
                        alert('删除失败！')
                   }
               })
        },    
        getAllList(){    
            this.$http    
                .get('http://***/bing/getprodinfo')    
                .then(result=>{    
                    var json=result.body;    
                    if(json.status===0){    
                        this.list = json.message    
                    }    
                    else{    
                        alert('获取数据失败')    
                    }    
                })    
        }    
    }    
})