[TOC] #### 变异方法push的留言版实例讲解 <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">发表</button> </div> <script> var app = new Vue({ el: '#hdcms', data: { //当前用户输入内容 current_content:'', comments: [ {content: '后盾人'}, {content: '向军老师'}, ] }, methods:{ push(){ var content = {content:this.current_content} this.comments.push(content); this.current_content =''; } } }); </script> #### 变异方法unshit&pop&shift的实例应用讲解 <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('pre')">发表到前面</button> <br> <button v-on:click="del('last')">删除最后一条评论</button> <button v-on:click="del('first')">删除第一条评论</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 'pre': this.comments.unshift(content); break; } this.current_content = ''; }, del(type){ switch (type) { case 'last': this.comments.pop(); break; case 'first': this.comments.shift(); break; } } } }); </script> #### 变异方法splice删除评论功能实现 <div id="hdcms"> <li v-for="(v,k) in comments"> {{v.content}} <button v-on:click="remove(k)">删除</button> </li> <textarea v-model="current_content" cols="30" rows="10"></textarea><br> <button v-on:click="push('end')">发表到后面</button> <button v-on:click="push('pre')">发表到前面</button> <br> <button v-on:click="del('last')">删除最后一条评论</button> <button v-on:click="del('first')">删除第一条评论</button> </div> <script> var app = new Vue({ el: '#hdcms', data: { //当前用户输入内容 current_content: '', comments: [ {content: '后盾人'}, {content: '向军老师'}, ] }, methods: { remove(k){ this.comments.splice(k,1); }, push(type){ var content = {content: this.current_content} switch (type) { case 'end': this.comments.push(content); break; case 'pre': this.comments.unshift(content); break; } this.current_content = ''; }, del(type){ switch (type) { case 'last': this.comments.pop(); break; case 'first': this.comments.shift(); break; } } } }); </script> #### 变异方法与reverse对评论进行排序处理 <div id="hdcms"> <li v-for="(v,k) in comments"> {{v.id}} - {{v.content}} <button v-on:click="remove(k)">删除</button> </li> <textarea v-model="current_content" cols="30" rows="10"></textarea><br> <button v-on:click="push('end')">发表到后面</button> <button v-on:click="push('pre')">发表到前面</button> <br> <button v-on:click="del('last')">删除最后一条评论</button> <button v-on:click="del('first')">删除第一条评论</button> <br> <button v-on:click="sort()">按照编号排序</button> <button v-on:click="reverse()">反转顺序</button> </div> <script> var app = new Vue({ el: '#hdcms', data: { //当前用户输入内容 current_content: '', comments: [ {id: 2, content: 'HDPHP'}, {id: 4, content: 'HDCMS'}, {id: 1, content: '后盾人'}, {id: 3, content: '向军老师'}, ] }, methods: { sort(){ this.comments.sort(function (a, b) { return a.id > b.id; }) }, reverse(){ this.comments.reverse(); }, remove(k){ this.comments.splice(k, 1); }, push(type){ var id = this.comments.length+1; var content = {id:id,content: this.current_content} switch (type) { case 'end': this.comments.push(content); break; case 'pre': this.comments.unshift(content); break; } this.current_content = ''; }, del(type){ switch (type) { case 'last': this.comments.pop(); break; case 'first': this.comments.shift(); break; } } } }); </script> 变异方法filter与regexp实现评论搜索功能 <div id="hdcms"> <li v-for="(v,k) in comments"> {{v.id}} - {{v.content}} <button v-on:click="remove(k)">删除</button> </li> <textarea v-model="current_content" cols="30" rows="10"></textarea><br> <button v-on:click="push('end')">发表到后面</button> <button v-on:click="push('pre')">发表到前面</button> <br> <button v-on:click="del('last')">删除最后一条评论</button> <button v-on:click="del('first')">删除第一条评论</button> <br> <button v-on:click="sort()">按照编号排序</button> <button v-on:click="reverse()">反转顺序</button> <br> <input type="text" v-on:keyup.enter="search" v-model="search_content"> </div> <script> var app = new Vue({ el: '#hdcms', data: { //搜索内容 search_content:'', //当前用户输入内容 current_content: '', comments: [ {id: 2, content: 'HDPHP'}, {id: 4, content: 'HDCMS'}, {id: 1, content: '后盾人'}, {id: 3, content: '向军老师'}, ] }, methods: { search(){ this.comments = this.comments.filter((item)=>{ var reg = new RegExp(this.search_content,'i'); return reg.test(item.content); }) }, sort(){ this.comments.sort(function (a, b) { return a.id > b.id; }) }, reverse(){ this.comments.reverse(); }, remove(k){ this.comments.splice(k, 1); }, push(type){ var id = this.comments.length+1; var content = {id:id,content: this.current_content} switch (type) { case 'end': this.comments.push(content); break; case 'pre': this.comments.unshift(content); break; } this.current_content = ''; }, del(type){ switch (type) { case 'last': this.comments.pop(); break; case 'first': this.comments.shift(); break; } } } }); </script>