《vue2.0 框架学习》--过滤器_vue2.0框架学习-优快云博客

本文深入探讨了Vue 2.0中过滤器的使用技巧，包括内部过滤器、全局过滤器及优先级规则。通过具体示例，如数字格式化、日期时间转换等，展示了如何在Vue应用中有效运用过滤器增强数据展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

过滤器

       1.内部过滤器
       2.全局过滤器
       3.优先级：就近原则
4.逗号操作符
5.匿名函数

demo

<!DOCTYPE html>
<html>
<head>
	<title>vue2.0 filter</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<script src="../node_modules/vue/dist/vue.js"></script>


	<style>
		a{text-decoration: none;}
		[v-cloak]{display: none;}
	</style>
</head>
<body>
	<div id="app" v-cloak>

		<p>{{3.1415926|toFixed(2)}}</p>

		<p>{{0 | format}}</p>
		<p>{{9 | format}}</p>
		<p>{{10 | format}}</p>


		<button @click="show">{{flag |conversion}}</button>
		<ul v-if="!flag">
			<li>{{msg}}</li>
		</ul>

		<!-- inline  -->

		<p>
			<select name="hobby" id="hobby">
				<option :value="item.id" v-for="item in hobby">
					{{item.con}}
				</option>
			</select>
		</p>

		<p>{{currentTime | timeFormat()}}</p>
		
	</div>
	
	<script>
		// dom 文档加载完成后

		// 全局 --页面加载

		Vue.filter('toFixed',function(data,pram){
			return data.toFixed(n);
		});

		Vue.filter('format',function(data,pram){
			return (data<10)?'0'+data:data;
		});

		// 时间-时间戳

		Vue.filter('timeFormat',function(data,pram){
			let d = new Date(data);
			return d.getFullYear() +"-"+(d.getMonth()+1)+"-"+d.getDate();
		});

		window.onload = function(){
			new Vue({
				el:'#app',
				data:{
					currentTime:new Date().getTime(),
					hobby:[
						{
							id:"1",
							con:"吃饭",
						},
						{
							id:"2",
							con:"睡觉",
						},
						{
							id:"3",
							con:"打豆豆",
						}
					],
					flag:true,
					value:'',
					msg:'hello vue'
				},
				filters:{
					conversion:function(type){
						switch(type){
							case true:
								return '显示';
								break;
							case false:
								return '隐藏';
								break;

						}
					},
					toFixed:function(data,n){
						return data.toFixed(n);
					}
				},
				methods:{
					show:function(){
						this.flag = !this.flag;
					},
					handler:function(ev){
						console.log(this.msg);
						// ev.stopPropagation();
					}
				}
			});


		}
	</script>

</body>
</html>