vue学习(十五) 过滤器简单实用

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue过滤器" title="vue过滤器">vue过滤器：

概念：vue.js允许你自定义过滤器可被用作一些常见文本的格式化。过滤器可以用在两个地方：插值表达式   v-bind表达式  由管道符指示

//过滤器调用时候的格式
{{ name | 处理的函数名 }}
//可以通过Vue.filter来自定义过滤器  data就是管道符" | " 前面的内容，也就是name
Vue.filter(\'过滤器名称\'，function(data){
　　　return data+\'hahahaha\'
})
//该过滤器就是为插值表达式的name自动加上hahahaha  最终在页面上显示 的是name的值hahahaha

//html 需求：使用过滤器把单纯替换为天真
<div id="app">
　<p>{{msg | msgdeal}}</p>//管道符前面的值会传递给过滤器参数
　<p>{{msg | msgdealAuto(\'疯狂\'，\'11222333\')}}</p>//将某些目标替换为 疯狂 管道符会被传递到过滤器第一个参数，过滤器参数会被传递到第二个参数

  <p>{{msg | msgdeal | test}}</p>//可以连续调用多个过滤器，msg先被msgdeal处理后 再接着被test过滤器处理 最后插值表达式的值是 曾经某人也是一个天真=====的少年，天真=====的认为~~~
</div>
//script
<script>
　　//定义一个全局的过滤器 名字叫做 msgdeal
　　Vue.filter(\'msgdeal\',function(msg){
　　　　return msg.replace(\'单纯\'，\'天真\') //这样写 只会替换第一个
　　　　//replace()的第一个参数不仅可以写字符串，还可以定义一个正则表达式
　　　　return msg.replace(/单纯/g,\'邪恶\') //正则表达式 g全局匹配
　　})
　　Vue.filter(\'msgdealAuto\',function(msg,arg,arg2){
　　　　return msg.replace(/单纯/g, arg+arg2)
　　})
　　Vue.filter(\'test\',function(msg){
　　　　return msg+\'=====\'
　　})　　
　　var vm = new Vue({
　　　　el:\'app\',
　　　　data:{
　　　　　　msg:\'曾经某人也是一个单纯的少年，单纯的认为~~~\'
　　　　}
　　})
</script>

以上是 vue学习(十五) 过滤器简单实用 的全部内容， 来源链接： utcz.com/z/379222.html

回到顶部