码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-10-08 11:23:56      阅读:305      评论:0      收藏:0      [点我收藏+]

标签:head   渲染   boot   app   device   dev   oct   vuejs   html   

后台渲染模板如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与后台模板引擎“双花括号”冲突时的解决办法

标签:head   渲染   boot   app   device   dev   oct   vuejs   html   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!