在本教程中，我将使用Atom。
下载原子代码编辑器
如果没有高亮显示代码，请安装vue-fmt插件。
首先，什么是Vue.js？Js是一个单一页面应用程序JavaScript框架。它与角和反应有许多相似之处。这是一个进步的Web应用程序框架，对于开发更多的交互式Web应用程序非常有用。与Web应用程序一起，Vue.js被许多网站广泛使用，如GitLab、9gag、Behance和许多其他网站。什么是Nuxt.js？Js是Vue.js的框架。它主要用于Vue.js应用程序的服务器端呈现。由于这是Vue.js的框架，Nuxt.js和Vue.js之间有许多相似之处。如果您要从Vue.js迁移到Nuxt.js，则不需要对应用程序进行许多更改。例如，nuxt.js中的路由器链接。开始现在，我们可以开始开发这个项目了。开发动态分页要求您了解Vue.js和Nuxt.js。你应该知道安装和基本的HTML，CSS和路由器链接.我必须告诉你，Vue.js有最好的教程之一，您可以访问这里了解更多.在这篇文章中，我们使用了W3学校的CSS材料。如果您正在使用Nuxt.js开发应用程序，请复制并粘贴以下代码。
CSS
1script: [
2 {src:’https://code.jquery.com/jquery-3.4.1.slim.min.js’,integrity:’sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n’,crossorigin:’anonymous’},
3 {src:’https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js’,integrity:’sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo’,crossorigin:’anonymous’},
4 {src:’https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js’,integrity:’sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6′,crossorigin:’anonymous’}
5 ],
6 link: [
7 {rel:’icon’,type:’image/x-icon’,href:’/favicon.ico’},
8 {rel:’stylesheet’,href:’https://fonts.googleapis.com/css?family=Oswald’},
9 {rel:’stylesheet’,href:’https://fonts.googleapis.com/css?family=Open Sans’},
10 {rel:’stylesheet’,href:’https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css’},
11 {rel:’stylesheet’,href:’https://www.w3schools.com/w3css/4/w3.css’},
12 {rel:’stylesheet’,href:’https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css’,integrity:’sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh’,crossorigin:’anonymous’},
13 {rel:’stylesheet’,href:’https://www.w3schools.com/lib/w3-theme-black.css’}
14 ]
如果您正在使用Vue.js，则更新index.html。
HTML
1<linkrel=”stylesheet”href=”https://fonts.googleapis.com/css?family=Roboto”>
2<linkrel=”stylesheet”href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
3<linkrel=”stylesheet”href=”https://www.w3schools.com/w3css/4/w3.css”>
4<linkrel=”stylesheet”href=”https://www.w3schools.com/lib/w3-theme-black.css”>
5<linkhref=”https://fonts.googleapis.com/css?family=Montserrat”rel=”stylesheet”>
让我们深入研究代码，模板标签包含关于笔记本电脑、RAM、操作系统和价格的所有基本HTML，除了“V-for”之外，没有什么“Vueish”。可以使用v-for指令根据数组呈现项列表。这个V-for指令需要“项中的项”，在本例中，第一个v-for指令是“在总页中的pageNumber”，而另一个v-for指令是“分页的文章”，它将获取有关笔记本电脑的所有信息。当“CurentPage”为1时，动态分页将从第一页开始。一旦用户单击另一个页面，“currentPage”就会更新到用户单击的页码。模板HTML：
HTML
1<templatelang=”html”>
2 <divclass=”w3-light-grey”>
3 <divclass=”w3-content”>
4 <divclass=”w3-row w3-padding w3-border”>
5 <divclass=”w3-col l8 s12″>
6 <divclass=”w3-container w3-white w3-margin w3-padding-large”>
7 <divclass=”w3-justify”>
8 <h1>Laptops</h1>
9 <br><br>
10 <div>
11 <buttonv-for=”pageNumber in totalPages”:key=”pageNumber.id”class=”w3-button”v-bind:key=”pageNumber”@click=”setPage(pageNumber)”:class=”{current: currentPage === pageNumber, last: (pageNumber == totalPages && Math.abs(pageNumber – currentPage) > 3), first:(pageNumber == 1 && Math.abs(pageNumber – currentPage) > 3)}”>{
12 {
13 pageNumber
14 }
15 }
16 </button>
17 </div>
18 <divclass=”container w3-white w3-card”v-for=”article in paginate”:key=”article._id”>
19 <br>
20 <divclass=”row”>
21 <divclass=”col-sm-4″>
22 <imgsrc=”~/assets/laptop.jpg”>
23 </div>
24 <divclass=”col-sm-4″>
25 <h5><spanclass=”w3-large w3-text-teal”>{
26 { article.title
27 }
28 },</span></h5>
29 <span>OS: {{article.os}}</span><br>
30 <span>{{article.size}} Inches</span><br>
31 <span>{{article.ram}} GB RAM</span><br>
32 <spanv-if=”article.storage >= 1000″>{
33 {article.storage/1000
34 }
35 }
36 TB Storage,</span>
37 <spanv-else>{
38 {
39 article.storage
40 }
41 } GB Storage,</span><br>
42 </div>
43 <divclass=”col-sm-4″>
44 <h3>${
45 {
46 article.price
47 }
48 }</h3>
49 <p><ahref=””><buttonclass=”w3-button w3-block w3-teal”>Buy Now</button></a></p>
50 </div>
51 </div>
52 <hr>
53 </div>
54 <div>
55 <buttonv-for=”pageNumber in totalPages”:key=”pageNumber.id”class=”w3-button”v-bind:key=”pageNumber”@click=”setPage(pageNumber)”:class=”{current: currentPage === pageNumber, last: (pageNumber == totalPages && Math.abs(pageNumber – currentPage) > 3), first:(pageNumber == 1 && Math.abs(pageNumber – currentPage) > 3)}”>{
56 {
57 pageNumber
58 }
59 }
60 </button>
61 </div>
62 </div>
63 </div>
64 </div>
65 </div>
66 </div>
67 </div>
68</template>
看看下面的代码，它是一个带有返回对象的数据函数，用于双向数据绑定。该对象包含项目数组，该数组包含有关膝上型计算机操作系统、价格、重量、大小、存储和膝上型计算机内存的所有信息。您可以将“itemsPerPage”更新为任何数字。如果您希望每页显示五项，则可以将其更新为五项。
杰森
1data()
2{
3 return{
4 articles: [
5 {
6 os:’Windows’,
7 price:’500′,
8 weight:’3.9′,
9 size:’11.1′,
10 storage:’500′,
11 ram:’8′,
12 company:’hp’,
13 title:’HP laptop 14′
14 },
15 {
16 os:’Chromeos’,
17 price:’400′,
18 weight:’7.0 Pounds’,
19 size:’11.1′,
20 storage:’256 GB’,
21 ram:’4′,
22 company:’hp’,
23 title:’HP Chromebook 14′
24 },
25 {
26 os:’Windows’,
27 price:’450′,
28 weight:’3.9′,
29 size:’11.1′,
30 storage:’500′,
31 ram:’8′,
32 company:’hp’,
33 title:’HP laptop 14′
34 },
35 {
36 os:’Windows’,
37 price:’600′,
38 weight:’3.9′,
39 size:’11.1′,
40 storage:’500′,
41 ram:’8′,
42 company:’hp’,
43 title:’HP laptop 14′
44 },
45 {
46 os:’Windows’,
47 price:’700′,
48 weight:’3.9′,
49 size:’11.1′,
50 storage:’500′,
51 ram:’8′,
52 company:’hp’,
53 title:’HP laptop 14′
54 },
55 {
56 os:’Windows’,
57 price:’350′,
58 weight:’3.9′,
59 size:’11.1′,
60 storage:’500′,
61 ram:’8′,
62 company:’hp’,
63 title:’HP laptop 14′
64 },
65 {
66 os:’Windows’,
67 price:’400′,
68 weight:’3.9′,
69 size:’11.1′,
70 storage:’500′,
71 ram:’8′,
72 company:’hp’,
73 title:’HP laptop 14′
74 }],
75 currentPage:1,
76 itemsPerPage:3,
77 resultCount:0
78 }
79},
在方法中添加以下代码。调用“setpage”函数来更新当前页面。
JavaScript
1methods: {
2 setPage:function(pageNumber) {
3 this.currentPage=pageNumber
4 },
5},
这是计算的属性。“总页”是整个动态页面的逻辑。例如，如果项目页为3，并且项目数组中总共有12项，那么“Total Page”元素将为4。
JavaScript
1computed:
2{
3 /* eslint-disable */
4 totalPages:function()
5 {
6 if(this.resultCount==0)
7 {
8 return1
9 }
10 else
11 {
12 returnMath.ceil(this.resultCount/this.itemsPerPage)
13 }
14 },
15 /* eslint-disable */
16 paginate:function()
17 {
18 if(!this.articles||this.articles.length!=this.articles.length)
19 {
20 return
21 }
22 this.resultCount=this.articles.length
23 if(this.currentPage>=this.totalPages)
24 {
25 this.currentPage=this.totalPages
26 }
27 varindex=this.currentPage*this.itemsPerPage-this.itemsPerPage
28 returnthis.articles.slice(index,index+this.itemsPerPage)
29 }
30},
31}
添加一些样式以更改当前页的颜色。
HTML
1<stylelang=”css”>
2.current{
3 color:teal;
4}
5</style>
那就结束了。在实现此代码之后，如果您有任何疑问，请立即与我们联系，删除下面的评论。
福州软件开发哪家强？
