首页 > Web开发 > 详细

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

时间:2017-10-08 10:53:17      阅读:1086      评论:0      收藏:0      [点我收藏+]

后台渲染模板如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

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

原文:http://www.cnblogs.com/qkabcd/p/7636612.html

(1)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!