vue.js与后台模板引擎“双花括号”冲突时的解决办法

后台渲染模板如swig，也使用“{{ }}“作为渲染，与前端vue的产生冲突，此时只要在新建Vue对象时，添加delimiters: ['${', '}'],就搞定了，代码如下

复制代码
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    

    <title>Blog Template for Bootstrap</title>

   
   
  </head>

  <body>

   <div id="app">
   555
  ${message }
</div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    
    <script src="/public/js/vue.js"></script>
    
    
    <script>
    //Vue.config.delimiters = ['${', '}$'];
        var app= new Vue({
         delimiters: ['${', '}'],
    el:'#app',
    data:{
        regDom: 1
        ,loginDom: 0
        ,message: 'Hello Vue!'
        
    }
});
    </script>
  </body>
  
</html>
复制代码

官方参考地址：http://vuejs.org/api/#delimiters

posted @   qkabcd  阅读(5213)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示