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)
页面效果
