vue分页练习

最新推荐文章于 2024-07-06 16:47:02 发布

dede3535

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量94

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangruifang/p/7765197.html

版权

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>分页练习</title>
    <script src="js/vue.js"></script>
 </head>
 <style>
    .isList{
        list-style:none;
    }
    .isPadding{
        margin:5px;
        padding:5px;
        border:2px solid gray;
    }
    .isRed{
        color:red;
    }
 </style>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <ul v-bind:class="{isList:listStyle}">
            <li v-for="(tmp,index) in pageNumbers"
            v-bind:style="{float:isFloat}" 
            v-bind:class="{isPadding:isStyle,isRed:index==pageOne}" 
            @click="changeBg(index)">{{tmp}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs",
                listStyle:true,
                isFloat:"left",
                isStyle:true,
                pageNumbers:[1,2,3,4,5],
                pageOne:0
            },
            methods:{
                changeBg:function(myIndex){
                    this.pageOne = myIndex;
                }
            }
        })
    </script>
 </body>
</html>

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
    <style>
        ul    {
            list-style:none;
        }
        li{
            padding:10px;
            margin:5px;
            border:1px solid gray;
            float:left;
        }
        .isRed{
            color:red;
        }
    </style>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <ul>
            <li v-for="(tmp,index) in pageNumbers" v-bind:class="{isRed:index==pageNo}" @click="handleClick(index)">{{tmp}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs",
                pageNumbers:[1,2,3,4,5],
                pageNo:0
            },
            methods:{
                handleClick:function(myIndex){
                    this.pageNo = myIndex;
                }
            }
        })
    </script>
 </body>
</html>

转载于:https://www.cnblogs.com/wangruifang/p/7765197.html

dede3535

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue分页练习

<!doctype html><html> <head> <meta charset="UTF-8"> <title>分页练习</title> <script src="js/vue.js"></script> </head> <st...
复制链接

扫一扫