sort排序运用，注册事件，v-for，v-bind（：）运用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
10     <style>
11         #app {
12             margin-top: 20px;
13         }
14 
15         .media {
16             padding: 12px 8px;
17             margin-bottom: 20px;
18             border-radius: 4px;
19             border: 1px solid #ddd;
20         }
21 
22         .vote {
23             cursor: pointer;
24         }
25 
26         .blue-border {
27             border: 1px solid blue;
28         }
29     </style>
30 </head>
31 
32 <body>
33 
34     <div id="app">
35         <div class="container">
36             <div class="row" v-for="book in sortbooks" :key="id">
37                 <div class="col-xs-8 col-xs-offset-2" :class='book.votes>=30 ?" blue-border":"" '>
38                     <div class="media" >
39                         <div class="media-left">
40                             <a :href="book.url">
41                                 <img :src="book.bookImage" alt="" style="width: 64px; height: 64px;">
42                             </a>
43                         </div>
44                         <div class="media-body">
45                             <h3 class="media-heading">{{book.title}}</h3>
46                             <p>{{book.description}}</p>
47                             <p>作者：{{book.author}} 
48                                 <!-- @click="book.votes=book.votes+1" 第一种方法 -->
49                                 <span class="pull-right vote"  @click="book.votes=book.votes+1">
50                                     <i class="glyphicon glyphicon-thumbs-up"></i>
51                                     {{book.votes}}
52                                 </span>
53                             </p>
54                         </div>
55                     </div>
56                 </div>
57             </div>
58         </div>
59     </div>
60     <script src="./vue.js"></script>
61     <script src="seed.js"></script>
62     <script>
63         const app = new Vue({
64             el: '#app',
65             data: {   
66                 books: Seed.books
67             },
68             // 计算属性 sort排序，sort（小，大）=>大-小，从大到小进行排序
69             computed:{
70                 sortbooks(){
71                     return this.books.sort((book1,book2)=>book2.votes - book1.votes)
72                 }
73             }  
74             // 第二种方法
75             // methods:{
76             //     support(ID){
77             //         // 根据id，在 books 数组中查找对应的 book 对象，如果找不到，find() 方法会返回 undefined
78             //      const voteID = this.books.find(book =>book.id==ID);
79                  
80             //      if(voteID){
81             //          voteID.votes++;
82             //      }
83             //     }               
84             // }
85         })
86     </script>
87 </body>
88 
89 </html>

注册事件：

第一种方法（）

@click="book.votes=book.votes+1" 


第二种方法（methods方法）

methods:{

support(ID){

// 根据id，在 books 数组中查找对应的 book 对象，如果找不到，find() 方法会返回 undefined

const voteID = this.books.find(book =>book.id==ID);

if(voteID){

voteID.votes++;

}

v-for
　　v-for使用最好配合 ：key一起使用

v-for=“book in books”
v-for=“（book，index）”

v-bind（简写为冒号（：））

应用到标签属性前面，即可在属性值中插入表达式（:title，:src，:class，:href）

sort排序

 计算属性 sort排序，sort（小，大）=>大-小，从大到小进行排序
           computed:{
               sortbooks(){
                   return this.books.sort((book1,book2)=>book2.votes - book1.votes)



页面效果

上一篇背景的多重设置

下一篇computed计算属性（get和set）

本文作者：张尊娟

本文链接：https://www.cnblogs.com/wszzj/p/12286672.html

posted @ 2020-02-09 11:56 张尊娟阅读(312) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

张尊娟

sort排序运用，注册事件，v-for，v-bind（：）运用

公告

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

张尊娟

sort排序运用，注册事件，v-for，v-bind（ ：）运用

公告

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

sort排序运用，注册事件，v-for，v-bind（：）运用