使用Vue + Django模板语言时如何解决双大括号问题？ [英] How to solve double curly brackets issue when using Vue + Django template language?

问题描述

我正在使用 Django模板语言，并且希望使用Vue在我的项目上。我遇到的一个主要问题是 {{...}} 语法。我的Vue数据完全不呈现。

I am using Django template language and would like to use Vue on my project. One main problem I encountered is {{...}} syntax. My Vue data is not rendered at all.

<div id="app">{{ message }} // This is just empty on my page </div>

我只是使用以下基本Vue脚本：

And I am just using this basic Vue script:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

我该如何解决？

推荐答案

glenfant所说的很简单，但这甚至更容易。

What glenfant said is easy, but this is even easier.

var app = new Vue({
    delimiters: ['{', '}'],
    el: '#app',
    data: { message: 'Hello Vue!' },
})

仅此而已：您可以使用标记配置Vue它应该用来工作。 :)我只用一个大括号– {…} –但您也可以使用双括号： [[和]] 。

That’s all: you configure Vue with the tag it should use to work. :) I use just one brace – {…} – but you can use doubled square brackets, too: [[ and ]].

这篇关于使用Vue + Django模板语言时如何解决双大括号问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！