条件与循环综合

<!DOCTYPE html>
<html>
     <head>
        <meta charset="utf-8">
        <title>Vue.js条件与循环</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style type="text/css">
            #app {
                width: 80%;
                margin: 0 auto;
            }
    
            .container {
                display: flex;
            }
    
            .card {
                width: 200px;
                height: 200px;
                border: 1px solid #eee;
                border-radius: 10px;
                margin-right: 30px;
                text-align: center;
            }
    
            .card img {
                width: 100%;
                height: 100%;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }
            .like{
                color: green;
            }
            .no-like{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h2 v-if="show">显示图书信息</h2>
            <div class="container">
                <!-- 通过循环遍历books数组-->
                <div class="card" v-for="book in books">
                    <h4>{{book.name}}</h4>
                    <!--绑定图书的封面属性 -->
                    <img :src="book.cover">
                    <!--判断like的值，显示不同的属性 -->
                    <p v-if="book.like === true" class="like">喜欢</p>
                    <p v-else class="no-like">不喜欢</p>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    show:true,
                    books:
                    [
                        {
                            name: '奥斯特利茨',
                            cover: 'img/01.jpg',
                            like: false
                        },
                        {
                            name: '念楼学短',
                            cover: 'img/02.jpg',
                            like: true
                        },
                        {
                            name: '夏日尽处',
                            cover: 'img/03.jpg',
                            like: true
                        },
                        {
                            name: '海边的理发店',
                            cover: 'img/04.jpg',
                            like: true
                        }
                    ]
                }
            })
        </script>
    </body>
</html>

运行结果