zoukankan html css js c++ java

vue分页练习

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

查看全文

相关阅读:
1-1-LVS负载均衡
 linux的软链接和硬连接的区别
 linux的目录结构及配置文件
 C6和C7对比
 1-6 RAID级别介绍
 Animation动画（一）
Android中的BroadCast静态注册与动态注册
 Android中Action
隐式Intent
Volley框架使用（POST）

原文地址：https://www.cnblogs.com/wangruifang/p/7765197.html