javascript - vue的数据绑定不支持以下表达式吗?
本文介绍了javascript - vue的数据绑定不支持以下表达式吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
可能是我基础不好,不是很会区分表达式和语句。
我想实现 '123|234|345' 中的竖线变成空格
<div class="box">{{msg.replace(/\|/g,' ')}}</div>
<script>
var box = new Vue({
el: ".box",
data: {
msg: '123|234|345'
}
});
</script>
开始时看了官网的例子说支持 {{ message.split('').reverse().join('') }} 这类的表达式,就想着正则应该也算表达式。后来发现报错了,再测试了几次。
{{msg.replace('|',' ')}} 这样是没问题的,不过只能修改到第一个匹配到的|。
想理解下原因,大大们可以解释一下吗?
最后是用了filter才解决的。
解决方案
我尝试了一下你的代码,看到报错如下:
[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
这篇关于javascript - vue的数据绑定不支持以下表达式吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文