发表到最后
push(content)
发表到前面
unshift(content)
删除最后一条
pop()
删除第一条
shift()
示例：
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变异方法：push/unshift pop/shift</title> <script src="vue.js"></script> </head> <body> <div id="hdcms"> <li v-for="v in comments"> {{v.content}} </li> <textarea v-model="current_content" cols="30" rows="10"></textarea><br> <button v-on:click="push('end')">发表到最后</button> <button v-on:click="push('prev')">发表到前面</button> <br> <button v-on:click="del('pop')">删除最后一条</button> <button v-on:click="del('shift')">删除第一条</button> </div> <script> var app = new Vue({ el: '#hdcms', data: { //当前用户输入内容： current_content: "", comments: [ {content: "后盾人"}, {content: "老师"} ] }, methods: { push(type) { var content = {content: this.current_content}; switch (type) { case 'end': this.comments.push(content); break; case 'prev': this.comments.unshift(content); break; } this.current_content = ""; }, del(type) { switch (type) { case 'pop': this.comments.pop(); break; case 'shift': this.comments.shift(); break; } } } }); </script> </body> </html> |