Javascript 基本Vue.js示例不起作用_Javascript_Data Binding_Vue.js

Javascript 基本Vue.js示例不起作用

javascript data-binding vue.js

Javascript 基本Vue.js示例不起作用,javascript,data-binding,vue.js,Javascript,Data Binding,Vue.js,我有一个超基本的出发点： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="Content/dictionary.css" /> <script src="Scripts/kuroshiro.

我有一个超基本的出发点：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <link rel="stylesheet" type="text/css" href="Content/dictionary.css" />

    <script src="Scripts/kuroshiro.min.js"></script>
</head>
<body>
    <div id="searchResultsVue">
        <table>
            <tr v-for="r in results">
                {{ r.Result.ent_seq }}
            </tr>
        </table>
    </div>


    <script src="https://vuejs.org/js/vue.js"></script>
    <script>


        var searchResultsVue = new Vue({
            el: '#searchResultsVue',
            data: { results: [{ Result: { ent_seq: 'asd' } }] }
        });
    </script>
</body>
</html>


{{r.Result.ent_seq}
var searchResultsVue=新的Vue({
el:“#searchResultsVue”，
数据：{results:[{Result:{ent_seq:'asd'}}]}
});

但我明白了

[Vue warn]：属性或方法“r”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。请参阅：

我不明白你需要修正你的标记

tr

需要

td

作为其子项才能正常工作

<tr v-for="r in results">
  <td>{{ r.Result.ent_seq }}</td>
</tr>


{{r.Result.ent_seq}

您需要修复标记

tr

需要

td

作为其子项才能正常工作

<tr v-for="r in results">
  <td>{{ r.Result.ent_seq }}</td>
</tr>


{{r.Result.ent_seq}

您必须在tr内使用td标签。表行似乎有一些特殊之处


{{r.Result.ent_seq}
var searchResultsVue=新的Vue({
el:“#searchResultsVue”，
数据：{results:[{Result:{ent_seq:'asd'}}]}
});

您必须在tr内使用td标签。表行似乎有一些特殊之处


{{r.Result.ent_seq}
var searchResultsVue=新的Vue({
el:“#searchResultsVue”，
数据：{results:[{Result:{ent_seq:'asd'}}]}
});

这是HTML宽松的呈现实践中的一个问题。当它为一个表构建Dom元素时，它需要一个特定的结构，任何偏离该结构的东西都会被推到定义之外

诸如此类

    <table>
        <tr v-for="r in results">
            {{ r.Result.ent_seq }}
        </tr>
    </table>


{{r.Result.ent_seq}

像

    <table>
        <tr v-for="r in results">
        </tr>
    </table>
    {{ r.Result.ent_seq }}


{{r.Result.ent_seq}

错误在于它看到了对循环外部的循环变量的调用

在代码周围添加一个表定义标记可以阻止它被推送。

这是HTML宽松的呈现实践的一个问题。当它为一个表构建Dom元素时，它需要一个特定的结构，任何偏离该结构的东西都会被推到定义之外

诸如此类

    <table>
        <tr v-for="r in results">
            {{ r.Result.ent_seq }}
        </tr>
    </table>


{{r.Result.ent_seq}

像

    <table>
        <tr v-for="r in results">
        </tr>
    </table>
    {{ r.Result.ent_seq }}


{{r.Result.ent_seq}

错误在于它看到了对循环外部的循环变量的调用

在代码周围添加一个表定义标记可以阻止它被推送