<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue test</title>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
<div class="block" v-for="item in datalist" :key="item.id">
{{item.id}}----{{ item.ar_title }}----
</div>
<template>
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[13, 23, 33, 43,53]"
:page-size="13"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
</div>
</body>
<!-- import Vue before Element -->
<!--<script src="https://unpkg.com/vue@2/dist/vue.js"></script>-->
<script type="text/javascript" src="<?php echo '/themes/default/frontend/js'?>/vue.js"></script>
<!-- import JavaScript -->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script type="text/javascript" src="<?php echo '/themes/default/frontend/js'?>/element.js"></script>
<!-- import axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
visible: false,
currentPage1: 5,
currentPage2: 5,
currentPage3: 5,
currentPage4: 1,
total:300,
page:1,
limit:13,
datalist:[],
}
},
methods: {
handleSizeChange(val) {
//console.log(`每页 ${val} 条`);
axios.get("/show_list/ajax_list/MjM",{params:{page:this.page,limit:val}}).then(res=>{
this.limit = val;
this.total = res.data.total;
this.datalist = res.data.data;
//console.log(res.data);
});
//由于this在回调函数中指向不同并非是vue实例所以先赋值给_this
/*var _this=this
axios({
method: 'post',
url: '/show_list/ajax_list/MjM',
headers:{
//转义数据格式，否则后端接收不到参数
'Content-Type':'application/x-www-form-urlencoded'
},
data: {
page: this.page,
limit: val,
},
}).then(function (response) {
console.log(response.data);
let result =response.data.data;
_this.limit = val;
_this.total = response.data.total;
_this.datalist = result;
});*/
},
handleCurrentChange(val) {
//console.log(`当前页: ${val}`);
axios.get("/show_list/ajax_list/MjM",{params:{page:val,limit:this.limit}}).then(res=>{
this.page = val;
this.total = res.data.total;
this.datalist = res.data.data;
//console.log(res.data);
});
//由于this在回调函数中指向不同并非是vue实例所以先赋值给_this
/*var _this=this
axios({
method: 'post',
url: '/show_list/ajax_list/MjM',
headers:{
//转义数据格式，否则后端接收不到参数
'Content-Type':'application/x-www-form-urlencoded'
},
data: {
page: val,
limit: this.limit,
},
}).then(function (response) {
console.log(response.data);
let result =response.data.data;
_this.page = val;
_this.total = response.data.total;
_this.datalist = result;
});*/
},
getData(){
return axios.get('/show_list/ajax_list/MjM');
//return axios.get('http://www.yi.com/show_list/ajax_list/MjM').then(res=>{
//console.log(res.data.data);
//this.total = res.data.total
//this.datalist = res.data.data;
//return res.data;
//});
}
},
mounted(){
this.getData().then(res=>{
this.total = res.data.total;
this.datalist = res.data.data;
});
}
})
</script>
</html>
匿名
2025-10-22
盖楼盖楼！
匿名
2025-08-11
沙发沙发
匿名
2025-08-10
https://at.oiik.cn/bing.html
匿名
2025-02-21
实用，我在开发https://minmail.app/时候使用到了
王飞翔
2024-12-30
亲爱的朋友：您好！中国疫情持续蔓延，很多人症状非常严重持久不愈，医院人满为患，各年龄段随地倒猝死的现象暴增，多省感染手足口、甲流、乙流、支原体、合胞及腺病毒的儿童不断攀升，目前各种天灾人祸，天气异象频发。古今中外的很多预言都说了这几年人类有大灾难，如刘伯温在预言中说 “贫者一万留一千，富者一万留二三”,“贫富若不回心转，看看死期到眼前”, 预言中也告诉世人如何逃离劫难的方法，真心希望您能躲过末劫中的劫难，有个美好的未来，请您务必打开下方网址认真了解，内有躲避瘟疫保平安的方法。网址1：https://github.com/1992513/www/blob/master/README.md?abhgc#1 网址2：bitly.net/55bbbb 网址3：https://d3ankibxiji86m.cloudfront.net/30gj 如打不开请多换几个浏览器试
匿名
2024-12-12
Backdata 搜索引擎网址提交入口：https://backdata.net/submit-site.html