『前端学习笔记』 Vue.js 过滤器与自定义指令

参考视频：学 Vue.js 看这个就够了

官方文档：Vue.js

过滤器：filter

可以用作一些常见文本的格式化。

• 应用场景

1. mustachc插值
2. v-bind表达式

全局过滤器：Vue.filter()方法

• 定义

<div class="myapp">
  <p>{
   {
    msg | myfilter }}</p> <!--语法：管道符后接自定义过滤器名称-->
  <p>{
   {
    msg | myfilter('QWE') }}</p> <!--加参数-->
  <p>{
   {
    msg | myfilter('QWE') | myfilter2 }}</p> <!--可以多次调用-->
</div>

<script src="js/vue.js"></script>
<script>

  Vue.filter('myfilter', function (msg, str) {
    /*参数1：自定义过滤器名称 参数2：回调函数(参数1：[固定]原值，可更名 参数后续：调用决定)*/
    if(str == null || str == undefined)
      return msg.replace(/abc/g, 'ABC'); /*返回值返回到插值表达式中*/ /*正则替换：全局*/
    else
      return msg.replace(/abc/g, str); /*使用参数替换*/
  }); /*必须定义在Vue对象前面*/

  Vue.filter('myfilter2', msg => msg + " add filter2");

	var vm = new Vue({
   
		el:'.myapp',
		data:{
   
		  msg: "abcdefabcdefabcdefabcdefabcdef"
		}
	})