VueJs 数据不会显示答案

【问题标题】：VueJs data won't displayVueJs 数据不会显示
【发布时间】：2026-02-09 10:30:01
【问题描述】：

我使用 Django 和 VueJs。

我尝试在 Django 模板中使用 Vue，但是当尝试从我的脚本中显示数据时，什么都没有出现。

这是我的 html 文件：

{% load static %}
<body>
  <p>No polls are available.</p>
  <div id="app">
    {{message}}
  </div>
  <script src="{% static "app.js" %}" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js">     
  </script>
</body>

在我的 app.js 中：

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

我的脚本已加载，但您好 Vue！不会出现。

【问题讨论】：

如果使用 Vue，我认为混合使用 Django 模板不是一个好主意。你遇到的问题应该是{{message}}被Django模板解析，如果你没有用render_to_response(r'your-template.tpl',{'message': 'something at here'})响应，{{message}}将是空白的，这意味着当浏览器收到来自服务器的响应时，它不会有{{message}}在那里
Making Django & Vue.js work together with {% verbatim %}的可能重复

标签： javascript html django templates vue.js

【解决方案1】：

似乎 Vue JS 分隔符 {{ & }} 与 jinja 模板分隔符一起崩溃。解决方案就是更改分隔符。

new Vue({
    delimiters : ['[[',']]'],
    el: '#app',
    data: () => {
      return {
         message: "hello world"
      }
    }
  })

在这里，我将分隔符更改为 [[ & ]]。所以，你可以像这样使用它：

<div id="app">[[message]]</div>

【讨论】：

【解决方案2】：

您的数据

data: {
message: 'Hello Vue!'
}

应该是

 data: function () {
  return {
    messages: 'Hello!'
  }
 }

【讨论】：

它不起作用，我需要以其他方式调用该函数吗？
@Max0u 这很奇怪.. 尝试在 codepen.io 上设置您的代码示例

【解决方案3】：

正如另一个答案中指出的那样：下面的工作示例：

new Vue({
    el: '#app',
    data: () => {
      return {
    	  message: "hello world"
      }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  Message: {{ message }}
</div>

【讨论】：