[分享]Vue 和 Blade都使用{{}}标示变量，混合使用时候会冲突，如何解决呢？

Vue 和 Blade 都是在 Web 开发中使用广泛的工具，其中 Vue 是基于 JavaScript 的渐进式框架，而 Blade 是 Laravel 框架自带的模板引擎。由于两种工具都使用双大括...

Vue 和 Blade 都是在 Web 开发中使用广泛的工具，其中 Vue 是基于 JavaScript 的渐进式框架，而 Blade 是 Laravel 框架自带的模板引擎。由于两种工具都使用双大括号 {{ }} 来标示模板中的变量，因此在使用 Vue 和 Blade 的时候可能会产生冲突。例如下面代码

                <div class="form-group">
                    <label for="attr">属性</label>
                    <select class="form-control" id="attr" v-model="attr">
                        <option v-for="option in attrs" :value="option">{{ option }}</option>
                    </select>
                </div>

{{ option }}会报错，找不到变量。正确方式应该如下写法：

                <div class="form-group">
                    <label for="attr">属性</label>
                    <select class="form-control" id="attr" v-model="attr">
                    @verbatim
                        <option v-for="option in attrs" :value="option">{{ option }}</option>
                    @endverbatim
                    </select>
                </div>

在 Blade 中使用 @verbatim 指令来告诉 Blade 不要对双大括号中的内容进行解析，就可以解决问题了。