使用vue插件
- 使用chrome浏览器调试插件Vue.js devtools
- 添加一行代码Vue.config.devtools = true;
使用devtools插入代码.png
vue调试面板.png
vue过滤器
- 过滤器只会改变显示结果,而不是修改数据
- 过滤器调用时候的格式
<p>{{msg|msgFormat}}</p>
- 定义一个过滤器，把显示结果你改成他，只会修改第一个（放在script标签的开头？放在结尾的时候没有显示效果）
Vue.filter('msgFormat',function(msg){
return msg.replace('他','你')
})
data:{
msg:'他的朋友，他的敌人'
},
修改效果.png
- 除了可以写一个字符串之外，还可以定义一个正则，将所有‘你’改成‘他’
Vue.filter('msgFormat',function(msg){
return msg.replace(/他/g,'你')
})
全部关键字修改.png
- 传入一个参数的过滤器
Vue.filter('msgFormat',function(msg,arg){
return msg.replace(/他/g,arg)
})
<p>{{msg|msgFormat('wo')}}</p>
传入参数修改.png
- 定义格式化时间的全局过滤器
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}-${d}`
})
修改前显示效果.png
过滤后效果.png
- 使用过滤器再添加上时分秒
if(pattern.toLowerCase()==='yyyy-mm-dd'){
return `${y}-${m}-${d}`}
else{
var hh=dt.getHours()
var mm=dt.getMinutes()
var ss=dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
最终效果.png
- 全局过滤器就是所有的vm实例都共享的
- 定义私有过滤器,过滤器有两个条件[过滤器名称和处理函数]，过滤器调用时采用就近原则，如果私有过滤器和全局过滤器名称一致，优先调用私有过滤器定义私有过滤器,过滤器有两个条件[过滤器名称和处理函数]，过滤器调用时采用就近原则，如果私有过滤器和全局过滤器名称一致，优先调用私有过滤器
var vm=new Vue({
el:'#div1',
data:{
msg:'他的朋友，他的敌人'
},
methods:{
},
filters:{//定义私有过滤器,过滤器有两个条件[过滤器名称和处理函数]
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}-${d}`}
else{
var hh=dt.getHours()
var mm=dt.getMinutes()
var ss=dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}
}
})
列表案例
- 根据id添加列表
- 根据id实现删除效果
<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)//实现删除
return true;
//在some方法中,如果热return true,就会立即终止这个数组循环
}
})
}
或者
del(id){//删除列表
var index=this.list.findIndex(item=>{
if(item.id==id){
return true;}
})
this.list.splice(index,1)
}
- 自定义一个search方法来代替从list中直接获取数据
<tr v-for="item in list" :key="item.id">
<tr v-for="item in search(keywords)" :key="item.id">
- 实现在文本框中通过搜索关键字来匹配相应条目
<label>
搜索名称关键字：
<input type="text" v-model="keywords" class="form-control">
</label>
search(keywords){//根据关键字进行数据搜索
var newlist=[]
this.list.forEach(item=>{
if(item.name.indexOf(keywords) !=-1){//进行字符串匹配
newlist.push(item)
}
})
return newlist
}
search(keywords){//根据关键字进行数据搜索
return this.list.filter(item=>{
if(item.name.includes(keywords))
//ES6中提供一个方法 string.prototype.includes('字符串')
//若包含则返回true,否则false
{return item}
})
}
