使用vue插件
- 使用chrome瀏覽器調(diào)試插件Vue.js devtools
- 添加一行代碼Vue.config.devtools = true;
使用devtools插入代碼.png
vue調(diào)試面板.png
vue過濾器
- 過濾器只會(huì)改變顯示結(jié)果,而不是修改數(shù)據(jù)
- 過濾器調(diào)用時(shí)候的格式
<p>{{msg|msgFormat}}</p>
- 定義一個(gè)過濾器秕脓，把顯示結(jié)果你改成他徽诲，只會(huì)修改第一個(gè)（放在script標(biāo)簽的開頭缸浦？放在結(jié)尾的時(shí)候沒有顯示效果）
Vue.filter('msgFormat',function(msg){
return msg.replace('他','你')
})
data:{
msg:'他的朋友想邦，他的敵人'
},
修改效果.png
- 除了可以寫一個(gè)字符串之外焚碌，還可以定義一個(gè)正則，將所有‘你’改成‘他’
Vue.filter('msgFormat',function(msg){
return msg.replace(/他/g,'你')
})
全部關(guān)鍵字修改.png
- 傳入一個(gè)參數(shù)的過濾器
Vue.filter('msgFormat',function(msg,arg){
return msg.replace(/他/g,arg)
})
<p>{{msg|msgFormat('wo')}}</p>
傳入?yún)?shù)修改.png
- 定義格式化時(shí)間的全局過濾器
Vue.filter("dateFormat",function(dateStr){
var dt=new Date(dateStr)
var y=dt.getFullyear()
var m=dt.getMonth()+1
var d=dt.getDate()
return `${y}-&{m}-$leddd2u`
})
修改前顯示效果.png
過濾后效果.png
- 使用過濾器再添加上時(shí)分秒
if(pattern.toLowerCase()==='yyyy-mm-dd'){
return `${y}-${m}-$yo2wkrq`}
else{
var hh=dt.getHours()
var mm=dt.getMinutes()
var ss=dt.getSeconds()
return `${y}-${m}-$zax7qed ${hh}:${mm}:${ss}`
}
最終效果.png
- 全局過濾器就是所有的vm實(shí)例都共享的
- 定義私有過濾器,過濾器有兩個(gè)條件[過濾器名稱和處理函數(shù)]，過濾器調(diào)用時(shí)采用就近原則，如果私有過濾器和全局過濾器名稱一致尚镰，優(yōu)先調(diào)用私有過濾器定義私有過濾器,過濾器有兩個(gè)條件[過濾器名稱和處理函數(shù)]，過濾器調(diào)用時(shí)采用就近原則哪廓，如果私有過濾器和全局過濾器名稱一致狗唉，優(yōu)先調(diào)用私有過濾器
var vm=new Vue({
el:'#div1',
data:{
msg:'他的朋友，他的敵人'
},
methods:{
},
filters:{//定義私有過濾器,過濾器有兩個(gè)條件[過濾器名稱和處理函數(shù)]
dataFormat:function(dataStr,pattern){
var dt=new Date(dateStr)
var y=dt.getFullYear()
var m=dt.getMonth()+1
var d=dt.getDate()
if(pattern.toLowerCase()==='yyyy-mm-dd'){
return `${y}-${m}-$wi0y2ir`}
else{
var hh=dt.getHours()
var mm=dt.getMinutes()
var ss=dt.getSeconds()
return `${y}-${m}-$olpqueh ${hh}:${mm}:${ss}`
}
}
}
})
列表案例
- 根據(jù)id添加列表
- 根據(jù)id實(shí)現(xiàn)刪除效果
<td><a href="" @click.prevent="del(item.id)">刪除</a></td>
del(id){//刪除列表
this.list.some((item,i)=>{
if(item.id==id){//id是否匹配
this.list.splice(i,1)//實(shí)現(xiàn)刪除
return true;
//在some方法中,如果熱return true,就會(huì)立即終止這個(gè)數(shù)組循環(huán)
}
})
}
或者
del(id){//刪除列表
var index=this.list.findIndex(item=>{
if(item.id==id){
return true;}
})
this.list.splice(index,1)
}
- 自定義一個(gè)search方法來代替從list中直接獲取數(shù)據(jù)
<tr v-for="item in list" :key="item.id">
<tr v-for="item in search(keywords)" :key="item.id">
- 實(shí)現(xiàn)在文本框中通過搜索關(guān)鍵字來匹配相應(yīng)條目
<label>
搜索名稱關(guān)鍵字：
<input type="text" v-model="keywords" class="form-control">
</label>
search(keywords){//根據(jù)關(guān)鍵字進(jìn)行數(shù)據(jù)搜索
var newlist=[]
this.list.forEach(item=>{
if(item.name.indexOf(keywords) !=-1){//進(jìn)行字符串匹配
newlist.push(item)
}
})
return newlist
}
search(keywords){//根據(jù)關(guān)鍵字進(jìn)行數(shù)據(jù)搜索
return this.list.filter(item=>{
if(item.name.includes(keywords))
//ES6中提供一個(gè)方法 string.prototype.includes('字符串')
//若包含則返回true,否則false
{return item}
})
}
