实例效果
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-demo</title>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
</head>
<body>
<div class="manmsg" id="left">
<h4>人员信息</h4>
<input type="text" v-model="query">
<table id="table2">
<thead>
<tr>
<th><input type="checkbox" class="allcheck"></th>
<th>序号</th>
<th>姓名</th>
<th>联系方式</th>
</tr>
</thead>
<tbody>
<tr v-for="data in list | filterBy query">
<td ><input type='checkbox' Id="+data.empId+" ></td>
<td v-text="data.empId"></td>
<td v-text="data.empName"></td>
<td v-text="data.phoneNo"></td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
new Vue({
el: "#left",
data: function (){
return {
query:"",
list:""
}
},
ready:function(){
if (!window.location.origin) {
window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
}
var ctx = window.location.origin;
var url = ctx + "/personResponsible/getPersonResponsible.do";//请求地址
var _self = this;
Vue.http.get(url).then(function (res){
_self.list = res.data.result.pagedata;
})
})
</script>
</html>
网友评论