Vue.js 数组更新
2019-08-06 本文已影响0人
Rinaloving
<!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
