您的位置：首页 > Web前端 > Vue.js

Vue 过滤器的使用

2019-05-04 21:52 429 查看

Vue 过滤器的使用

作用：为页面中数据进行添油加醋的功能
有两种：1.局部过滤器 2.全局过滤器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
// 局部过滤器
// 1.创建过滤器
// 2.{{数据 | 过滤器名字}}

// 过滤器后面如果传有参数，是在方法的第二个参数中体现
var App = {
data() {
return {
price:0,
msg:"hello world"
}
},
template:`<div>
<input type="number" v-model="price">
<h3>{{price | myCurrentcy('哈哈哈')}}</h3>
<h2>{{msg | myReverse}}</h2>
</div>`,
filters:{
myCurrentcy(value,arg){
return arg+'￥'+value;
}
},

};

// 全局过滤器
Vue.filter('myReverse',function(value){
return value.split("").reverse().join("");
});
new Vue({
el:"#app",
components:{
App,
},
template:`<App></App>`
})

</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航