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 @ 2017-10-08 09:44  qkabcd  阅读(5210)  评论(0)  编辑  收藏  举报