javascript - vue的数据绑定不支持以下表达式吗？

Question

可能是我基础不好，不是很会区分表达式和语句。

我想实现 '123|234|345' 中的竖线变成空格

<p class="box">{{msg.replace(/\|/g,' ')}}</p>
<script>
    var box = new Vue({
        el: ".box",
        data: {
            msg: '123|234|345'
        }
    });
</script>

开始时看了官网的例子说支持 {{ message.split('').reverse().join('') }} 这类的表达式，就想着正则应该也算表达式。后来发现报错了，再测试了几次。

{{msg.replace('|',' ')}} 这样是没问题的，不过只能修改到第一个匹配到的|。

想理解下原因，大大们可以解释一下吗？

最后是用了filter才解决的。

Answer 1

我尝试了一下你的代码，看到报错如下：

[Vue warn]: Invalid expression. Generated function body:  scope.msg.replace(/\
[Vue warn]: Failed to resolve filter: /g,

所以可以推测，Vue内部在解析{{}}时，这里碰到|就会当成是filter，所以msg.replace(/\|/g,' ')就被切成两部分进行解析，当然就报错了。

然后如果转译|，使用msg.replace(/\u007C/g,' ')，同样会报错。

SyntaxError: Invalid flags supplied to RegExp constructor 'scope'

所以{{}}里面应该不支持正则。下面的帖子里Vue的作者回答了这点。
参考：http://forum.vuejs.org/topic/601/syntaxerror-invalid-flags-supplied-to-regexp-constructor

Answer 2

可以写个filter，来进行字符串的替换。

Answer 3

原因自然是影响性能。

解决方案是 computed data 或者用 filter 。