Vue之For循环 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 示例</title>
</head>

<body>
    <!-- <ul v-for="book in books" :key='index'>
        <li>{{book.name}}</li>
    </ul> -->
    <div id="app">
        <ul v-for="(item,index) in books" :key='index'>
            <li>{{item.name}}</li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    books: [{ name: 'asda' }, { name: 'asdas' }],
                }
            }
            // computed: {
            //     classes: function () {
            //         return {
            //             active: this.isActive && !this.error,
            //             'text-fail': this.error && this.error.type ==='fail'
            //         }
            //     }
            // }

            //    computed: {
            //        fullName: {
            //            // Getter, 用于读取
            //            get: function () {
            //                return this.fistName + ',' + this.lastName;
            //            },
            //            // Setter,写入时触发
            //            set: function (newValue) {
            //                 var names = newValue.split(',');
            //                 this.fistName = names[0];
            //                 this.lastName = names[names.length - 1];
            //            }
            //        }
            //    } 
        })
    </script>
</body>
<style>
    .active {
        color: red !important
    }

    .abc {
        color: beige
    }
</style>

</html>

　　

posted on 2020-09-18 15:56  王半仙儿的博客  阅读(1668)  评论(0)  编辑  收藏  举报

导航