Vue 包含一組觀察數(shù)組的變異方法，所以它們也將會觸發(fā)視圖更新。這些方法如下：
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) this.text = '' }, methodByPop: function () { this.result = '' this.result = this.items.pop() }, methodByShift: function () { this.result = '' this.result = this.items.shift() }, methodByUnshift: function () { this.result = '' this.result = this.items.unshift(this.text) this.text = '' }, methodBySplice: function () { this.result = '' this.result = this.items.splice(2,1,'yovan') }, methodBySort: function () { this.result = '' this.result = this.items.sort() }, methodByReverse: function () { this.result = '' this.result = this.items.reverse() alert(this.result) } } })</script>
新聞熱點
疑難解答
圖片精選
