[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>
- html&jquery網頁特效
- 標簽分類及特點
- 關于文字標簽
- 網頁定時跳轉
- css透明度和插件
- 0.前端常用工具
- 1.tab切換效果
- 2.tab切換效果多個代碼復用
- 3.百度新聞導航條效果
- 4.解決鼠標移入過快的問題
- 5.滾動條位置
- 6.元素尺寸
- 7.全選反選操作
- 8.固定定位
- 9.開關效果
- 10.節點操作
- 11.仿小米商品展示效果
- 12.仿小米商品展示效果復用
- 13.固定導航欄效果
- 14.凡客輪播圖效果
- 15.頂部下滑廣告效果
- 16.京東左右滑動輪播圖
- 17.京東左右滑動無縫輪播圖
- 18.選擇器
- 19.篩選
- 20.開關效果
- 21.滑動效果
- 22.小米商品效果css實現
- 23.元素水平垂直居中
- laravel5.6
- LARAVEL 介紹&安裝
- javascript & css 腳手架
- php常用工具類
- 安裝laravel-ide-helper增強代碼提示
- 使用migration創建表和數據填充
- 解決mysql5.7以下laravel不能執行數據遷移的問題
- 路由
- 登陸操作自定義模型
- 使用中間件middleware進行登錄權限驗證
- 進行表單驗證處理
- 使用laracasts-flash定制消息提示
- 資源路由
- 寶塔面板安裝fileinfo擴展
- laravel上傳處理與使用hdjs快速實現前端上傳組件
- thinkphp
- phpstorm
- phpstorm安裝插件
- 定義快捷鍵
- 關閉提示
- 將代碼實時同步到遠程服務器
- sublime
- composer
- git使用
- git安裝和配置作者信息
- git新建項目和維護項目
- git日志操作
- git別名操作
- git分支操作
- git生成發布壓縮包
- git系統別名
- gitrebase操作
- 使用SSH與GITHUB遠程服務器進行無密碼連接
- 本地版本庫主動使用remote與遠程GITHUB進行關聯
- 本地分支與GITHUB遠程分支同步
- 項目實戰-新入職員工參與項目開發時分支使用
- 自動部署
- ios開發
- linux
- 1.centos6.5 mysql忘記登入密碼
- html5
- 標簽
- 表單
- 音頻與視頻
- webstorage儲存
- canvas
- css3
- 01.CSS3布局
- 02.transition動畫
- 03.animation動畫
- 04.flex彈性盒模型
- Less
- gulpjs
- es6
- ES6模塊化
- let和const命令
- ES6函數擴展&解構賦值
- JavaScript之數據遍歷
- class類
- Set和Map數據結構
- Vue
- 1.創建第一個應用
- 2.屬性動態綁定
- 3.表達式
- 4.解決phpstorm不識別ECMASCRIPT6語法的問題
- 5.watch監聽屬性
- 6.使用object與array控制class
- 7.條件渲染
- 8.循環
- 9.變異方法
- 10.事件
- 11.表單
- 12.組件
- 13.css過渡動
- 14.js庫控制vue過渡動作
- 15.自定義指令directive
- 16.使用vue-cli初始化單頁面應用
- 17.Vue-router路由
- 18.vuex
- 19.vue-cli
- webpack
- zanui
- nodejs