& lt; div id=坝τ谩北?
& lt; p>{{味精| msgFormat(“疯狂+ 1 ',' 123 ')|测试}}& lt;/p>
& lt;/div>//定义一个Vue全局的过滤器,名字叫做msgFormat
Vue。过滤器(msgFormat,函数(味精、参数、最长){//字符串的替代方法,第一个参数,除了可写一个字符串之外,还可以定义一个正则
返回味精。替换(/单纯/g, arg +最长)
}）
Vue。过滤器(“测试”,函数(msg) {
返回味精+“========?
}）//创建Vue实例,得到视图模型
var vm=new Vue ({
埃尔:“#应用”,
数据:{
味精:“曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人的
},
方法:{}
});
下面js代码的HTML部分
& lt; div id=坝τ谩北?
& lt; !{{1 + 1}}——比;
& lt; div类="面板panel-primary "比;
& lt; div类=皃anel-heading”比;
& lt; h4类="面板标题"祝辞添加品牌& lt;/h4>
& lt;/div>
& lt; div class=" panel-body form-inline”比;
& lt; label>
Id:
& lt;输入类型=拔谋尽眂lass=氨淼タ丶眝模型=" id "比;
& lt;/label>
& lt; label>
名称:
& lt;输入类型=拔谋尽崩?v模型“表单控件”=皀ame”@keyup.f2=疤砑印北?
& lt;/label>
& lt; !——在Vue中使用事件绑定机制,为元素指定处理函数的时候,如果加了小括号,就可以给函数传参了——比;
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/添加”类=癰tn btn-primary @click”=疤砑?)”在
& lt; label>
搜索名称关键字:
& lt; !——注意:Vue中所有的指令,在调用的时候,都以v -开头——比;
& lt;输入类型=拔谋尽眂lass=氨淼タ丶眝模型="关键字" id="搜索" v-focus v-color=薄奥躺薄氨?
& lt;/label>
& lt;/div>
& lt;/div>
& lt;表类="表table-bordered table-hover表拆开,“比;
& lt; thead>
& lt; tr>
& lt; th> Id
& lt; th> Name
& lt; th> Ctime
& lt; th> Operation
& lt;/tr>
& lt;/thead>
& lt; tbody>
& lt; !——之前,v)中的数据,都是直接从数据上的列表中直接渲染过来的——比;
& lt; !——现在,我们自定义了一个搜索方法,同时,把所有的关键字,通过传参的形式,传递给了搜索方法——比;
& lt; !——在搜索方法内部,通过执行对循环,把所有符合搜索关键字的数据,保存到一个新数组中,返回——比;
& lt; tr v="项搜索(关键字)”:关键=癷tem.id”比;
& lt; td>{{项目。id}} & lt;/td>
& lt; td v-text=" item.name "祝辞& lt;/td>
& lt; td>{{项目。ctime | dateFormat ()}} & lt;/td>
& lt; td>
& lt; a href=" " @click.prevent="德尔(item.id)”在删除& lt;/a>
& lt;/td>
& lt;/tr>
& lt;/tbody>
& lt;/table>
& lt;/div>
//如何自定义一个私有的过滤器(局部)
var vm2=new Vue ({
埃尔:“# app2 ',
数据:{
dt:新的日期()
},
方法:{},
过滤器:{//定义私有过滤器过滤器有两个条件【过滤器名称和处理函数】//过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候优先调用私有过滤器
dateFormat:函数(dateStr模式="){//根据给定的时间字符串,得到特定的时间
var dt=新日期(dateStr)//yyyy-mm-dd
var y=dt.getFullYear ()
var m=(dt.getMonth () + 1) .toString ()。padStart (2, ' 0 ')
.toString var d=dt.getDate () ()。padStart (2, ' 0 ')
如果(pattern.toLowerCase ()===yyyy-mm-dd) {
返回“$ {y} - {m} - {d}’美元
其他}{
.toString var hh=dt.getHours () ()。padStart (2, ' 0 ')
.toString var毫米=dt.getMinutes () ()。padStart (2, ' 0 ')
.toString var党卫军=dt.getSeconds () ()。padStart (2, ' 0 ')
返回“$ {y} - {m} - {d}美元$ {hh}: $ {mm}: ${党卫军}~ ~ ~ ~ ~ ~ ~”
}
}
},
指示:{//自定义私有指令
“fontweight”:{//设置字体粗细的
绑定:函数(el、绑定){
el.style。fontWeight=binding.value
}
},
“字形大小”:函数(el、绑定){//注意:这个函数等同于把代码写到了绑定和更新中去
el.style。字形大?方法(binding.value) +“px”
}
}
}）//过滤器的定义语法//Vue。过滤器('过滤器的名称的,函数(){})//过滤器中的功能,第一个参数,已经被规定死了,永远都是过滤器管道符前面传递过来的数据/* Vue。过滤器('过滤器的名称”,功能(数据){
返回数据+‘123’
