<!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>