脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-vuejs查询，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 <p id="app" v-cloak>
<!--人员PErson-page--展示页面-->
<p class="person-page page">
<h3>人员管理</h3>
<hr />
<!--查询条件-->
<p class="cond">
<p class="cond-head">
<h4>查询条件</h4>
</p>
<p class="cond-content">
<p class="row">
<p class="col-xs-4">
<p class="form-group">
<p class="input-group">
<p class="input-group-addon ">姓名</p>
<input type="text" class="form-control input-sm name" v-model="username">
</p>
</p>
</p>
<p class="col-xs-4">
<p class="form-group">
<p class="input-group">
<p class="input-group-addon ">电话</p>
<input type="text" class="form-control input-sm phone" v-model="mobileNo">
</p>
</p>
</p>
<p class="col-xs-4">
<p class="form-group">
<p class="input-group">
<p class="input-group-addon ">公司</p>
<input type="text" class="form-control input-sm company" v-model="company">
</p>
</p>
</p>
</p>
</p>
<p class="cond-foot text-right">
<button type="button" class="BTn btn-success btn-sm" v-on:click="loaddata(1)">查询</button>
</p>
</p>
<!--查询结果-->
<p class="result ">
<p class="cond-head ">
<h4>查询结果</h4>
<!--<button type="button" class="btn btn-success result-btn">导入</button>-->
</p>
<p class="cond-content">
<!--数据展示-->
<table class="table table-bordered table-hover text-center">
<thead>
<tr>
<td>姓名</td>
<td>电话</td>
<td>公司</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="x in tabledata">
<td>{{x.RealName}}</td>
<td>{{x.MobileNo}}</td>
<td>{{x.CustomerName}}</td>
<td>
<!--可以先写成a标签跳转 但实际ajax 展示另一个页面-->
<button type="button" class="btn btn-success btn-person" v-on:click="details(x.UserID)">详情</button>
</td>
</tr>
</tbody>
</table>
</p>
<!--分页-->
<p class="result-foot">
<ul id="pagefoot" class="pagination" style=";margin:0">


<li v-if="page>1"><a href="#" v-on:click="loaddata(page-1)">上一页</a></li>
<li class="disabled" v-else><a href="#">上一页</a></li>
<li v-for="n in pagenums">
<a href="#" v-on:click="loaddata(n)">{{n}}</a>
</li>
<li v-if="page<pagenumber"><a href="#" v-on:click="loaddata(page+1)">下一页</a></li>
<li class="disabled" v-else><a href="#">下一页</a></li>
</ul>
</p>
</p>
</p>
</p>


<script type="text/javascript">
// VAR domain = "https://.................";
new Vue({
el: '#app',
data: {
page: '1',
username: '',
MobileNo: '',
company:'',
tabledata:[],
pageSize: 10,
pagenumber: '',
visiblepage: 5


},

computed: {
pagenums: function () {
//初始化前后页边界
var lowPage = 1;
var highPage = this.pagenumber;
var pageArr = [];
if (this.pagenumber > this.visiblepage) {//总页数超过可见页数时，进一步处理；
var subVisiblePage = Math.floor(this.visiblepage / 2);
if (this.page > subVisiblePage && this.page < this.pagenumber - subVisiblePage + 1) {//处理正常的分页
lowPage = this.page - subVisiblePage;
highPage = this.page + subVisiblePage;
} else if (this.page <= subVisiblePage) {//处理前几页的逻辑
lowPage = 1;
highPage = this.visiblepage;
} else {//处理后几页的逻辑
lowPage = this.pagenumber - this.visiblepage + 1;
highPage = this.pagenumber;
}
}
//确定了上下page边界后，要准备压入数组中了
while (lowPage <= highPage) {
pageArr.push(lowPage);
lowPage++;
}


return pageArr;
}
},
methods: {
loaddata: function (page) {
var time = Math.round(Math.random() * 999) + 3000;
var url = '/MeetMember/UserInfoList?time=' + time;
this.page = page;

var httpOptions = {

//后端起的 与data中对应
username: this.username,
pagesize: this.pagesize,
company:this.COMpany,
MobileNo: this.MobileNo,
page: page
};

username: this.username,
pagesize: this.pagesize,
company:this.company,
MobileNo: this.MobileNo,
page: page
};

this.$http.post(url, httpOptions).then(function (response) {//接收后端数据

this.tabledata = response.data.tabledata.list;
this.pagenumber = response.data.tabledata.number;


//设置iframe的高度
this.$nextTick(function () {
var bodyHeight = $(document.body).height() + 'px';
$('#mainFrame', parent.document).height(bodyHeight);
});


},
function (response) {
// 响应错误回调
alert('访问失败', '错误');
})
},
details: function (id) {
var time = Math.round(Math.random() * 999) + 3000;
window.location.href = "/MeetMember/Detail?id=" + id + "&amp;time=" + time;
}

},
created: function () {
this.loaddata(1);
}
})
</script>

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-vuejs查询全部内容，希望文章能够帮你解决javascript代码实例教程-vuejs查询所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。