Vue 过滤器

项目前导 学习笔记

一、过滤器

        过滤器就是数据在真正渲染到页面中的时候，可以使用这个过滤器进行一些处理，把最终处理的结果渲染到网页中。

1.1、过滤器使用

• 在 html 代码中的使用格式

  1. 单个过滤器 {{要过滤的对象 | 过滤器的名字}}

  2. 多个过滤器 {{要过滤的对象 | 过滤器的名字1 | 过滤器的名字2 | 过滤器的名字3}}

  3. 单个过滤器 {{要过滤的对象 | 过滤器的名字(参数)}}

        过滤器可以用在两个地方：双花括号插值 和 v-bind表达式 (后者从2.1.0+开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由 “管道” 符号指示：

	<!-- 在双花括号中 -->
	{{ message|capitalize }}
	
	<!-- 在 `v-bind` 中 -->
	<div v-bind:id="rawId|formatId"></div>

1.2、过滤器创建

• 可以在一个组件的选项中定义本地的过滤器：

	filters: {
		capitalize: function (value) {
			if (!value) 
				return ''
			value = value.toString()
			return value.charAt(0).toUpperCase() + value.slice(1)
		}
	}

• 或者在创建 Vue 实例之前全局定义过滤器：

	Vue.filter('capitalize', function (value) {
		if (!value) 
			return ''
		value = value.toString()
		return value.charAt(0).toUpperCase() + value.slice(1)
	})
	
	new Vue({
		// ...
	})

例：

    <div id="app">
        <!--  要进行过滤处理的对象|过滤器的函数  -->
        <p>{{username|vstrip}}</p>
        <p>{{username2|vstrip}}</p>
        
        <!--  也可以给函数传值  -->
<!--        <p>{{username|vstrip2('-')}}</p>-->
<!--        <p>{{username2|vstrip2('-')}}</p>-->
    </div>


	<script>
	    // 去空格的过滤器
	    Vue.filter(
	        'vstrip', function(value){
	            console.log(value)
	            // 这里用 replace 只进行一次处理, 因此仅处理第一个出现的空格
	            // 可以定义函数实现对所有的空格进行处理
	            return value.replace(" ", "*")
	        },
	
	        // 传参
	<!--        'vstrip2', function(value, string){-->
	<!--            console.log(value)-->
	<!--            return value.replace(" ", string)-->
	<!--        }-->
	    );
	
	    new Vue({
	        el: "#app",
	        data: {
	            username: " 老 王 ",
	            username2: "老 王 "
	        }
	    });
	</script>