过滤器-过滤器的基本用法

过滤器

过滤器（Filters）是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定。
过滤器应该被添加在JavaScript表达式的尾部，由"管道符"进行调用，示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>message的值是：{{message | capi}}</p>
		</div>
		<script src="lib/vue-2.6.12.js"></script>
		<script>
			const vm = new Vue({
				el: '#app',
				data: {
					message: 'hello vue.js'
				},
				// 过滤器函数，必须被定义到filters节点之下
				// 过滤器本质上是函数
				filters: {
					// 注意：过滤器函数中形参中的val，永远都是”管道符“前面的那个值
					capi(val) {
						//字符串有charAt方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
						const first = val.charAt(0).toUpperCase()
						//字符串的slice方法，可以截取字符串，从指定索引往后截取
						const other = val.slice(1)
						// 强调：过滤器中，一定要由一个返回值
						return first + other
					}
				}
			})
		</script>
	</body>
</html>
posted @ 2023-06-08 00:10  Young_Yang_Yang  阅读(8)  评论(0)  编辑  收藏  举报