Vue全局过滤器的使用 运用在时间过滤 内容添加crud
Vue 时间 添加 内容 过滤 全局 运用 过滤器
2023-09-27 14:22:20 时间
过滤器的使用
msgFormt是你自己定义的过滤器方法,
Vue.filter是你自己定义的全局过滤器。没有s
过滤器要有返回值哈 用retuen
Vue.filter("msgFormt",function (msg,th) {
//第一参数 msgFormt 是方法
//第二个参数msg,是数据源,
//第三个参数,是自己在 <p>{{ msg | msgFormt("飞宇") }}</p> 中传递的参数 ‘飞宇’
return msg.replace(/单纯/g,th)
});
<div id="app">
<p>{{ msg | msgFormt }}</p>
<!-- msgFormt是一个过滤器 -->
</div>
<script>
Vue.filter("msgFormt",function(msg){
return msg.replace(/单纯/g,"邪恶")
})
var vm=new Vue({
el:"#app",
data:{
msg:"我是一个单纯的少年,单纯的我,傻傻的问,谁是单纯的人"
}
})
</script>
最后在页面输出 它会将原来的类容替换了
我是一个邪恶的少年,邪恶的我,傻傻的问,谁是邪恶的人
<div id="app">
<!--通过传递参数---可以随意的替换值-->
<p>{{ msg | msgFormt("飞宇") }}</p> <!-- msgFormt是一个过滤器 -->
</div>
<script>
//定义一个全局过滤器---
Vue.filter("msgFormt",function (msg,th) {
return msg.replace(/单纯/g,th)
});
vm=new Vue({
el:"#app",
data:{
msg:"单纯的我,单纯的问,谁是单纯的人"
}
});
最后输出 飞宇的我,飞宇的问,谁是飞宇的人
相关文章
- vue 中router.go、router.push和router.replace的区别
- Vue格式化日期或时间
- 深刻理解Vue中的组件
- vue工具
- Vue表格中时间的处理
- 【VUE】draggable resizable
- vue 页面 添加背景音乐
- vue路由
- Vue技术12.1基本列表
- React和Vue中,是如何监听变量变化的
- vue非常实用的几行代码【日期处理、字符串处理、数组处理、颜色操作】
- vue实现keep-alive页面缓存【三步骤配置,一步到位】
- Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用
- Vue服务端渲染 VS Vue浏览器端渲染)
- 你或许不知道Vue的这些小技巧
- Vue高版本中一些新特性的使用
- vue-router中参数传递 && 编程式导航 && 坑 && beforeRouteEnter
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航