Nachdem Sie im folgenden Code auf die Schaltfläche geklickt haben, ändert sich der Inhalt des Arrays app.items2 und die zweite UL wird ebenfalls in ein Li gerendert, aber die item.message in items2 wird nicht gerendert. Warum ist das so und wie kann man es lösen? ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<p id="example-1">
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<ul>
<li v-for="item in items2">{{ item.message }}</li>
</ul>
<button @click="aaa">移动</button>
</p>
<script src="http://vuejs.org/js/vue.js"></script>
<script>
var app = new Vue({
el: '#example-1',
data: {
items: [{
message: 'Foo'
}, {
message: 'Bar'
}],
items2: []
},
methods: {
aaa: function() {
this.items2.push(this.items.splice(0, 1));
}
}
})
</script>
</body>
</html>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
https://developer.mozilla.org...
https://jsfiddle.net/ycloud/n...
this.items2.push(...this.items.splice(0, 1));
splice方法返回一个数组
push接受不定长参数
可以使用concat方法
this.items2 = this.items2.concat(this.items.splice(0, 1));