vue中filters选项的用法
filters是.vue文件中export对象中的一个选项,其类型是Object,即包含Vue实例可用过滤器的哈希表。
下面讲讲filters选项的用法
1、html如下
<div id="app">
{{message | filters2| filters3(true,priceCount)}}
</div>
2、js如下
var app = new Vue({
el: "#app",data: {
message: 199,priceCount:0.8
},filters:{
filters2:function (arg) {
console.log("arg:"+arg)
if(arg>100){
return arg-8;
}else {
return arg;
}
},filters3:function (arg_1,arg_2,arg_3) {
var result;
console.log("arg_1:"+arg_1)
console.log("arg_2:"+arg_2)
console.log("arg_3:"+arg_3)
if(arg_2){
result = arg_1*arg_3;
console.log("result"+result);
return result;
}else{
result =arg_1;
console.log("result"+result);
return result
}
}
}
});
3、控制台的输出
helloVue.js:17 arg:199
helloVue.js:26 arg_1:191
helloVue.js:27 arg_2:true
helloVue.js:28 arg_3:0.8
helloVue.js:35 result152.8
4、分析
首先,在data里面定义两个变量message:199,priceCount:0.8,
然后,在.vue文件中的<script>里面的filters选项里面定义两个函数filters2(arg)和filters3(arg_1,arg_3)
最后,在.vue文件里面的<template>中调用filters中定义的函数,如下所示:
<div id="app">
{{message | filters2| filters3(true,priceCount)}}
</div>
{{}}里面第一个变量message是在data里面定义的变量,message作为filters2函数的参数,然后filters2函数的返回值result作为filter3函数的第一个参数,即filters3(result,true,priceCount),所以得到上述控制台的输出
转载地址:点击打开链接
原文地址:https://blog.csdn.net/tangxiujiang
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。