Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
都有什么功能?动手试验了一下:
<body>
<div id="app">
<div>
push方法:
<input type="text" v-model="text" @keyup.enter="methodByPush">
<input type="button" value="测试功能" @click="methodByPush">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
pop方法:
<input type="button" value="测试功能" @click="methodByPop">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
shift方法:
<input type="button" value="测试功能" @click="methodByShift">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
unshift方法:
<input type="text" v-model="text" @keyup.enter="methodByUnshift">
<input type="button" value="测试功能" @click="methodByUnshift">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
splice方法:
<input type="button" value="测试功能" @click="methodBySplice">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
sort方法:
<input type="button" value="测试功能" @click="methodBySort">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
reverse方法:
<input type="button" value="测试功能" @click="methodByReverse">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
result显示的地方:<br>
<span v-text="result"></span>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
items: [],
text: '',
result: ''
},
methods: {
methodByPush: function () {
this.result = this.items.push(this.text)










