vue中最基本的数据绑定形式是文本插值,它使用的是“Mustache”语法 (即双大括号)
<span>Message: {{ msg }}</span>
Laravel 中的 Blade 模板引擎使用了相同的语法,这时会产生冲突。
通过自定义 Vue 实例的 delimiters 属性来修改插值语法的分隔符。可以将双大括号 {{ }} 修改为其他字符,比如 [[ ]]。以下是如何在 Vue 实例中修改插值语法分隔符的示例:
var app = new Vue({
delimiters: ['[[', ']]'],
data: {
msg: 'Hello Vue!'
}
});
使用方式如下:
<span>Message: [[ msg ]]</span>
或者直接使用blade的语法禁用花括号
@verbatim
<div>{{ 这里的花括号将不会被 Blade 解析 }}</div>
@endverbatim