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

vue学习小记-过滤器

2020-06-05 06:13 483 查看

过滤器

过滤器使用范围:

只能用在{{ }}表达式和v-bind中

过滤器格式

Vue.filter('过滤器名称', function (data,参数) {//data是需要过滤的数据,
return ...........
})

实例

<!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>
<script src="../lib/vue.js"></script>
</head>

<body>
<div id='app'>
<p>{{ msg }}</p>
<!-- 页面输出为:我TMD还是曾经那个少年,没有TMD一丝丝改变 -->
<p>{{ msg | ftr }}</p>
<!-- 页面输出为:我还是曾经那个少年,没有一丝丝改变 -->
<p>{{ msg | msgFormat('他妈的') }}</p>
<!-- 页面输出为:我他妈的还是曾经那个少年,没有他妈的一丝丝改变 -->
</div>
<script>
// 定义全局过滤器
Vue.filter('msgFormat', function (data, n) {//data是需要过滤的数据,在这里就是msg
return data.replace(/TMD/g, n)
})

Vue.filter('ftr', function (data) {//data是需要过滤的数据,在这里就是msg
return data.replace(/TMD/g, '')
})

var vm = new Vue({
el: "#app",
data: {
msg: '我TMD还是曾经那个少年,没有TMD一丝丝改变'
},
methods: {

},
filters:{//这是定义私有过滤器,私有过滤器只在当前的new Vue实例里有效,在另一个实例里无法调用,而全局过滤器是所有实例都有效,如果私有个全局同名,优先调用私有,就近原则
fitName:function(){//fitName是过滤器名称
return data.replace(/TMD/g, '')
}
}
})
</script>
</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航