溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下：
都有什么功能？動手試驗了一下：
<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>
得到下面的結論：
push() 往數組最后面添加一個元素，成功返回當前數組的長度
pop() 刪除數組的最后一個元素，成功返回刪除元素的值
shift() 刪除數組的第一個元素，成功返回刪除元素的值
unshift() 往數組最前面添加一個元素，成功返回當前數組的長度
splice() 有三個參數，第一個是想要刪除的元素的下標（必選），第二個是想要刪除的個數（必選），第三個是刪除
后想要在原位置替換的值（可選）
sort() 使數組按照字符編碼默認從小到大排序,成功返回排序后的數組
reverse() 將數組倒序，成功返回倒序后的數組
后來發現這些應該都是javascript本來的方法吧？以前javascript沒學好，正好趁這次把這些方法的用法都給撿回來！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
