gpt4 book ai didi

解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

由于之前练习koa2,直接渲染的jquery写的传统页面.

这次想偷懒,直接script引入vue,发现渲染不出data值.

渲染引擎用得是xtpl, 找了半天没有发现可以修改xtpl渲染分隔符的配置 。

vue有! 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var myVue = new Vue({
  el: '#msgBoard' ,
  delimiters:[ '$$' , '$$' ],
  data() {
  return {
   msg: {
   num: 10
   }
  }
  },
  mounted() {
  console.dir( this )
  },
})

补充知识:前端——vue和nunjucks的模板渲染符{{}}冲突解决办法 。

由于在thinkjs上使用的是nunjucks的渲染技术,在了解到vue的时候发现vue用的也是{{}}进行模板代码识别.

找了一个vue的html代码放到thinkjs上面跑,发现数据无法绑定。然后上网寻得解决办法如下:

修改vue的标识符,前后加{% raw %}、{% endraw %},如下:

{% raw %}{{result.name}}{% endraw %} 。

问题解决.

以上这篇解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我.

原文链接:https://www.cnblogs.com/papi/p/9239532.html 。

最后此篇关于解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题的文章就讲到这里了,如果你想了解更多关于解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com