1、源码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="vue.js"></script>

<link rel="stylesheet" href="./lib/boot-strap.css" />

<title></title>

</head>

<body>

<div id="app">

<p>{{ msg | msgFormat('正能量满满+++','full') }}</p>

</div>

<script>

Vue.filter('msgFormat',function(msg,shuju1,shuju2){

return msg.replace(/帅气/g,shuju1 + shuju2)

})

var vm = new Vue({

el:'#app',

data:{

msg:'我是个帅气的小伙子，有梦想的男青年都是帅气的小伙子，懒惰成性的男青年一点都不帅气！'

},

methods:{

}

});

</script>

</body>

</html>


2、效果展示


即可以用过滤器选中我们想要替换的文字，更改为我们想要变成的文字，灵活运用，可多次替换增加。

（帅气 => 正能量满满+++ full）



PS：

    用正则表达式解析我们要替换的文字，则可以统一改动：

return msg.replace(/帅气/g,shuju1 + shuju2)

    过滤器filter格式：

{{ msg | msgFormat }}；

Vue.filter('msgFormat',function(msg,shuju1,shuju2)