Vue.js学习笔记（八）--------过滤器

过滤器

1. 一个过滤器

   定义一个首字母大写过滤器。

 效果图：

代码;

<div id="div1">
			随便输：<input v-model="text">
			<br> 正常：{{text}}
			<br> 加filters后首字母大写：{{text|capitalize}}
		</div>

		<script>
			new Vue({
				el: "#div1",
				data: {
					text: "",
				},
				filters: {
					capitalize: function(value) {
						if(!value) return ''; //如果为空，则返回空字符串
						value = value.toString();
						return value.charAt(0).toUpperCase() + value.substring(1);
					}
				}
			})
		</script>

2. 多个过滤器

效果图：

代码：

<div id="div1">
			随便输：<input v-model="text">
			<br> 正常：{{text}}
			<br> 加两个filters后首字母和尾字母大写：{{text|capitalize|capitalizeLastLetter}}
		</div>

		<script>
			new Vue({
				el: "#div1",
				data: {
					text: "",
				},
				filters: {
					capitalize: function(value) {
						if(!value) return ''; //如果为空，则返回空字符串
						value = value.toString();
						return value.charAt(0).toUpperCase() + value.substring(1);
					},
					capitalizeLastLetter: function(value) {
						if(!value) return '' //如果为空，则返回空字符串
						value = value.toString()
						return value.substring(0, value.length-1) + value.charAt(value.length - 1).toUpperCase()
					}
				}
			})
		</script>

3.全局过滤器

效果图：

代码：

<div id="div1">
			随便输：<input v-model="text">
			<br> 正常：{{text}}
			<br> 加全局过滤器后首字母和尾字母大写：{{text|capitalize|capitalizeLastLetter}}
		</div>

		<script>
					Vue.filter('capitalize', function (value) {
						if(!value) return ''; //如果为空，则返回空字符串
						value = value.toString();
						return value.charAt(0).toUpperCase() + value.substring(1);
					})
					Vue.filter('capitalizeLastLetter', function (value) {
						if(!value) return '' //如果为空，则返回空字符串
						value = value.toString()
						return value.substring(0, value.length-1) + value.charAt(value.length - 1).toUpperCase()
					})
			new Vue({
				el: "#div1",
				data: {
					text: "",
				}
			})
		</script>