Vue 和 Blade都使用{{}}标示变量,混合使用时候会冲突,如何解决呢?

admin 2023-11-15 16:34:57 974

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 不要对双大括号中的内容进行解析,就可以解决问题了。

可爱猫?Telegram电报群 https://t.me/ikeaimao

社区声明 1、本站提供的一切软件、教程和内容信息仅限用于学习和研究目的
2、本站资源为用户分享,如有侵权请邮件与我们联系处理敬请谅解!
3、本站信息来自网络,版权争议与本站无关。您必须在下载后的24小时之内,从您的电脑或手机中彻底删除上述内容
最新回复 (0)

您可以在 登录 or 注册 后,对此帖发表评论!

返回