<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h1>{{msg}}</h1> <h1>{{money}}</h1> <h1>{{getPrice()}}</h1> <!-- 这样就是price的过滤器写法 --> <!-- 在VUE3中,过滤器被舍弃了 --> <!-- 返回值还可以走一遍filter,再次实现过滤 --> <!-- 第一个位置不用写,会自动传递 --> <!-- 过滤器只能用在两个位置,一个是插值语法,一个是v-bind中 --> <h1>{{price | filterA() | filterB(3)}}</h1> <!-- v-bind也可以使用 --> <input type="text" :value="price | filterA() | filterB(3)"/> <!-- v-model是不能用过滤器的 --> </div> <div id="app1"> <h1>{{price1 | filterA() | filterB(3)}}</h1> </div> <script> // 配置全局过滤器 Vue.filter("filterA",function(val){ if(val === undefined || val === null || val === '') { return '-'; } return val; }); Vue.filter("filterB",function(val,number){ // 确保传过来的数据保留两位小数 return val.toFixed(number); }); const vm = new Vue({ el : "#app", data : { msg : "Hello", price : 50.6 }, methods : { getPrice() { if(this.price === undefined || this.price === null || this.price === '') { return '-'; } return this.price; } }, computed : { money() { if(this.price === undefined || this.price === null || this.price === '') { return '-'; } else { return this.price; } } }, // 过滤器可以接受value的数据,我们可以在这里进行格式化,而这里因为没有this // 就可以和业务代码剥离开了,耦合度更低了,复用性更强了 filters : { // 局部过滤器 // filterA(val){ // if(val === undefined || val === null || val === '') // { // return '-'; // } // return val; // }, // filterB(val,number){ // // 确保传过来的数据保留两位小数 // return val.toFixed(number); // } } }); const vm1 = new Vue({ el : "#app1", data : { price1 : 23 } }); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1>{{money}}</h1>
<h1>{{getPrice()}}</h1>
<!-- 这样就是price的过滤器写法 -->
<!-- 在VUE3中,过滤器被舍弃了 -->
<!-- 返回值还可以走一遍filter,再次实现过滤 -->
<!-- 第一个位置不用写,会自动传递 -->
<!-- 过滤器只能用在两个位置,一个是插值语法,一个是v-bind中 -->
<h1>{{price | filterA() | filterB(3)}}</h1>
<!-- v-bind也可以使用 -->
<input type="text" :value="price | filterA() | filterB(3)"/>
<!-- v-model是不能用过滤器的 -->
</div>
<div id="app1">
<h1>{{price1 | filterA() | filterB(3)}}</h1>
</div>
<script>
// 配置全局过滤器
Vue.filter("filterA",function(val){
if(val === undefined || val === null || val === '')
{
return '-';
}
return val;
});
Vue.filter("filterB",function(val,number){
// 确保传过来的数据保留两位小数
return val.toFixed(number);
});
const vm = new Vue({
el : "#app",
data : {
msg : "Hello",
price : 50.6
},
methods : {
getPrice()
{
if(this.price === undefined || this.price === null || this.price === '')
{
return '-';
}
return this.price;
}
},
computed : {
money()
{
if(this.price === undefined || this.price === null || this.price === '')
{
return '-';
}
else
{
return this.price;
}
}
},
// 过滤器可以接受value的数据,我们可以在这里进行格式化,而这里因为没有this
// 就可以和业务代码剥离开了,耦合度更低了,复用性更强了
filters : {
// 局部过滤器
// filterA(val){
// if(val === undefined || val === null || val === '')
// {
// return '-';
// }
// return val;
// },
// filterB(val,number){
// // 确保传过来的数据保留两位小数
// return val.toFixed(number);
// }
}
});
const vm1 = new Vue({
el : "#app1",
data : {
price1 : 23
}
});
</script>
</body>
</html>
VUE框架2中的过滤器之局部过滤器和全局过滤器------VUE框架
于 2023-11-30 15:56:33 首次发布