vue 基础入门笔记 07:过滤器
291 / 0 / 创建于 4年前 /
September 的个人博客
vue 基础入门笔记 07
- 过滤器用于常见文本的格式化，在两个地方
- 插值
- v-bind 表达式
<!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="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<p>{{msg | msgFormat('a','b')}}</p>
</div>
<script>
// 定义全局过滤器
// 过滤器可以传递多个参数
Vue.filter('msgFormat', function (msg,arg1,arg2) {
// 字符串replace方法 第一个参数填要替换的值也可以填正则表达式
//return msg.replace(/world/g, 'vue'+arg1+arg2)
})
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world'
},
methods: {},
// 私有过滤器
filters:{
msgFormat(msg,arg1,arg2){
return msg.replace(/world/g, 'vue'+arg1+arg2)
}
}
});
Vue.config.devtools = true
</script>
</body>
</html>本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号