vue 过滤器的使用

在组件内部用 filters:{
         1.声明过滤器
过滤器的名字:function(value){

               //内部一定要return
    
      }
 2.调用过滤器 ： 数据属性 | 过滤器的名字
 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	<script type="text/javascript">
		/*在组件内部用 filters:{
		 1.声明过滤器
        过滤器的名字:function(value){

				//内部一定要return 
	
			}

		2.调用过滤器 ：  数据属性 | 过滤器的名字


		}
		*/
		var App = {
			data(){
				return{
					price: 0,
					msg:'hello filter'
				}
			},
			template:`
				<div>
					<input type="number" name = 'price' v-model = 'price'/>
					<h3>{{price | myCurrentcy}}</h3>
				</div>
			`,
			filters:{

				myCurrentcy:function(value) {
					return  '¥' + value;
				}
			}
		}

		new Vue({
			el:'#app',
			components:{
				App
			},
			template:'<App />'
		});
	</script>
	

</body>
</html>

　　效果：

 

posted @ 2018-08-23 19:55  1点  阅读(114)  评论(0)  编辑  收藏  举报