vue中过滤器的使用

1登峰造极

已于 2023-04-07 10:20:17 修改

阅读量266

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript ecmascript

于 2020-07-13 14:58:26 首次发布

本文链接：https://blog.csdn.net/qq_33323469/article/details/107317165

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

vue中过滤器的使用

直接说是用场景，比如后台返回一个时间戳，前台要显示成年月日的形式，或者返回一段文本，我们只需要截取部分文字，

在data中定义两个变量

	data: {
			  msg1:"字数不足十个字",
			  msg2:"字数超过10次对方是否额外若翁绕弯儿无二"
	 },

写过滤方法 ，(注意filters与data是平级)

filters: {
			subStr: function(value) {
				 let strlen = value.length;
				if(strlen<10){
					 return value;
				}else{
				   let newstr = value.substring(0,10)+"...";
				   return newstr;
				}
		     },
		  },
//这里就是处理函数 直接return 返回的内容	，

使用方法 {{变量 | 方法名}}

<div id="app">
	<h3>{{msg1 | subStr}}</h3>
	<h3>{{msg2 | subStr}}</h3>
</div>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3>{{msg1 | subStr}}</h3>
			<h3>{{msg2 | subStr}}</h3>
		</div>
	</body>
	
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			filters: {
			subStr: function(value) {
				 let strlen = value.length;
				if(strlen<10){
					 return value;
				}else{
				   let newstr = value.substring(0,10)+"...";
				   return newstr;
				}
		     },
		  },
		  
	
			data: {
			  msg1:"字数不足十个字",
			  msg2:"字数超过10次对方是否额外若翁绕弯儿无二"
			},

			methods: {
			

			},
			mounted() {
		
			},
			created() {

			}
		});
	</script>
</html>

1登峰造极

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue中过滤器的使用

vue中过滤器的使用直接说是用场景，比如后台返回一个时间戳，前台要显示成年月日的形式，或者返回一段文本，我们只需要截取部分文字，在data中定义两个变量 data: { msg1:"字数不足十个字", msg2:"字数超过10次对方是否额外若翁绕弯儿无二" },写过滤方法，(注意filters与data是平级)filters: { subStr: function(value) { let strlen = value.length; if
复制链接

扫一扫