vuejs11-v-bind指令缩写

Vue分页组件实战

最新推荐文章于 2024-11-26 14:34:04 发布

转载最新推荐文章于 2024-11-26 14:34:04 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/564160

文章标签：

#javascript #ViewUI

本文介绍了一个使用Vue.js实现的简单分页组件案例。通过HTML、CSS和Vue.js结合的方式，实现了基本的分页功能，并展示了如何通过Vue的数据绑定来控制当前激活的页面。此示例适用于希望了解Vue中动态数据绑定和列表渲染技术的前端开发者。

<!DOCTYPE html>

<html>

<head>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box

}

html {

font-size: 12px;

font-family: Ubuntu, simHei, sans-serif;

font-weight: 400

}

body {

font-size: 1rem

}

#app {

margin: 0 auto;

max-width: 640px

}

.pagination {

display: inline-block;

padding-left: 0;

margin: 21px 0;

border-radius: 3px;

}

.pagination > li {

display: inline;

}

.pagination > li > a {

position: relative;

float: left;

padding: 6px 12px;

line-height: 1.5;

text-decoration: none;

color: #009a61;

background-color: #fff;

border: 1px solid #ddd;

margin-left: -1px;

list-style: none;

}

.pagination > li > a:hover {

background-color: #eee;

}

.pagination .active {

color: #fff;

background-color: #009a61;

border-left: none;

border-right: none;

}

.pagination .active:hover {

background: #009a61;

cursor: default;

}

.pagination > li:first-child > a .p {

border-bottom-left-radius: 3px;

border-top-left-radius: 3px;

}

.pagination > li:last-child > a {

border-bottom-right-radius: 3px;

border-top-right-radius: 3px;

}

</style>

</head>

<body>

</li>

</ul>

</div>

var vm = new Vue({

el:"#app",

data:{

activeNumber:1,

pageCount:10

}

});

</script>

</body>

</html>

注意:v-bind指令可以缩写为一个冒号

本文转自素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1895514