[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>