Vue.js 数组更新

作者: Rinaloving | 来源:发表于2019-08-06 11:38 被阅读0次

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>数组更新</title>
</head>
<body>

    <!--自动识别最新稳定版本的Vue.js-->
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <div id="app">
        <ul>
            <template v-for="book in books">
                <li>书名：{{ book.name }}</li>
                <li>作者：{{ book.author }}</li>
            </template>
        </ul>
    </div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                books:[
                    {
                        name:'《百年孤独》',
                        author:'马尔克斯'
                    },
                    {
                        name:'《百万英镑》',
                        author:'马克吐温'
                    },
                    {
                        name:'《城堡》',
                        author:'卡夫卡'

                    }
                ]
            }
        });
        // 过滤非‘百’字书名
        //app.books = app.books.filter(function(item){
         //   return item.name.match(/百/);
        //})

        // 插入
        Vue.set(app.books,3,{
            name:'《红楼梦》',
            author:'曹雪芹'
        })


    </script>

</body>
</html>

数组更新.png