Question

我的Vue变量被定义为无效的HTML标记。我如何防止这种情况以及如何使用我的Vue.js变量？

我收到此错误：此处不允许使用属性v-bind，检查将未知HTML标记属性突出显示为无效，并将这些属性标记为自定义以避免将其突出显示为无效

我使用Intellij

<script  src="../../static/js/vue.js"></script>

<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>

<script>
var app2 = new Vue({
    el: '#app-2',
    data: {
        message: 'You loaded this page on ' + new Date().toLocaleString()
    }
})
</script>

Answer 1

您可以在其前面添加data-前缀，使其成为有效的html属性。

<span data-v-bind:title="message">

Answer 2

您的代码有效（请参阅代码段）。确保Vue定义良好。

＆＃13;

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: 'You loaded this page on ' + new Date().toLocaleString()
    }
})

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app-2">
  <span v-bind:title="message">
      Hover your mouse over me for a few seconds to see my dynamically bound title!
  </span>
</div>

＆＃13;

Answer 3

问题似乎出在结肠上。您可以这样写：

<span v-bind="{title: message}">

这将在IntelliJ中工作。

Answer 4

正在帮助我解决错误的是 <html>至<!DOCTYPE html>

Vue.js标记为无效的HTML

4 个答案: