<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
<script src="../node_modules/jquery"></script>
</head>
<style>
.photo {
width: 60px;
height: 60px;
}
</style>
<body>
<!--先安装：npm install bootstrap --save-dev-->
<div id="app" class="container-fluid">
<br> <br>
ID:<input type="text" v-model="emp.id"><br>
NAME:<input type="text" v-model="emp.name"><br>
DESC:<input type="text" v-model="emp.desc"><br>
IMG:<input type="text" v-model="emp.img"><br>
<input type="button" class="btn btn-primary" value="add" @click="addEmp">
<hr/>
<table class="table table-hover table-bordered">
<tr>
<td>ID</td>
<td>NAME</td>
<td>DESC</td>
<td>IMG</td>
<td>Control</td>
</tr>
<tr v-for="data in emps">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.desc}}</td>
<!--<td>{{data.img}}</td>-->
<
<td><img class="photo" :src="data.img"></td>
<td><input @click="removeEmp(data)" type="button" value="remove" class="btn btn-danger"></td>
</tr>
</table>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
emps: [
{"id": 1, "name": "tom", "desc": "工程师", "img": "../img/lsl.jpg"},
{"id": 2, "name": "jack", "desc": "java工程师", "img": "../img/djx.jpg"},
{"id": 3, "name": "郭德纲", "desc": "相声大师", "img": "../img/may.jpg"},
{"id": 4, "name": "于谦", "desc": "抽烟喝酒烫头", "img": "../img/ymn.jpg"}
],
emp: {"id": 0, "name": "", "desc": "", "img": ""}
},
methods: {
addEmp: function () {
this.emps.push(this.emp)
this.emp = {"id": 0, "name": "", "desc": "", "img": ""};
},
removeEmp: function (data) {
//拿到下标后删除
var index = this.emps.indexOf(data);
//1表示删除几个
this.emps.splice(index, 1);
}
}
})
</script>
</html>
