categories:
- vue基础
tags: - 过滤器
过滤器
过滤器的作用，为页面中数据进行添加修改的功能
有两种 局部过滤器 全局过滤器
使用方法
声明过滤器
{{数据|过滤器的名字}}
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue基础之过滤器</title>
</head>
<body>
<div id="app"></div>
<script src="./vue.js"></script>
<script>
// 创建全局组件
// Vue.component('name',{option}
// 过滤器的作用，为页面中数据进行添加修改的功能
// 有两种 局部过滤器 全局过滤器
/*
1.声明过滤器
2.{{数据|过滤器的名字}}
*/
// 全局过滤器声明
Vue.filter('myReverse',function (value) {
return value.split('').reverse().join('');
});
// 全局过滤器传值
Vue.filter('myTwoArg',function (value,arg) {
return arg +" "+value.split('').reverse().join('');
});
var App = {
data(){
return {
price:0,
msg:'hello world'
};
},
template: `
<div>
<input type="text" v-model="price">
<h3>{{price|myCurrentcy}}</h3>
<h3>{{msg|myReverse}}</h3>
<h3>{{msg|myTwoArg("哈哈哈")}}</h3>
</div>
`,
// 局部过滤器
filters:{
// 声明过滤器
myCurrentcy: function (value) {
return "￥" + value;
}
}
}
new Vue({
el:'#app',
data(){
return {};
},
components:{
App
},
template:`
<App/>`
})
</script>
</body>
</html>