vue 2.0 自定义过滤器

最新推荐文章于 2020-06-12 10:48:28 发布

嘿丷如歌

最新推荐文章于 2020-06-12 10:48:28 发布

阅读量219

点赞数

分类专栏： vue 从入门到放弃

本文链接：https://blog.csdn.net/qq_35776392/article/details/78358373

版权

vue 从入门到放弃专栏收录该内容

10 篇文章 0 订阅

订阅专栏

由于vue 2.0 本身没有过滤器所以过滤器就只能我们自定义了
在这里写一个简单的字符串截取的过滤器

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/vue.js"></script>
		<script>
			Vue.filter("substr", function(value) {
				if(!value) {
					return '';
				}
				value = value.substr(0, 2);
				return value;
			})
			window.onload = function() {
				new Vue({
					data: {
						search: '',
						arr: ["谁在悬崖沏一壶茶", "温热前世的牵挂", "而我在调整千年的时差", "爱恨全喝下"]
					},
					methods: {
						add: function() {
							this.arr.push("演唱：苏见信、戴爱玲");
						}
					}
				}).$mount("#box")
			}
		</script>
	</head>

	<body>
		<div id="box">
			<input type="text" v-model="search">查询</input>
			</br>
			<input type="button" value="添加" @click="add" />
			<ui>
				<li v-for="(val,index) in arr">
					{{index}} {{val | substr}}
					</td>
					</tr>
		</div>
	</body>

</html>

嘿丷如歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 2.0 自定义过滤器

由于vue 2.0 本身没有过滤器所以过滤器就只能我们自定义了在这里写一个简单的字符串截取的过滤器 Title Vue.filter("substr", function(value) { if(!value) { return ''; } value = value.substr(0, 2);
复制链接

扫一扫