v-for无法正常渲染数组，页面刷新闪烁_数组改变造成页面闪动-CSDN博客

本文链接：https://blog.csdn.net/ryyzxf/article/details/109230685

v-for无法正常渲染数组，页面刷新闪烁

记一次无奈的vue学习经历

做完vue小项目后，我开始着手复习基础知识，跟着视频中的老师写了一个小案例。如下：

<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in movies">{{item}}</li>
        </ul>
    </div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/0.10.0/vue.min.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data: {
            movies: ['黄飞鸿', '黄飞鸿', '黄飞鸿', '黄飞鸿', '黄飞鸿'],
        }
    })
</script>
</html>

代码很简单，仅仅是个数组的渲染，正常结果应该是这样的：
在这里插入图片描述
但是我一直是这样的，刷新时还伴有闪烁后空白：

十分抓狂

对比了老师的和我的代码，我并没有错误。就这样我搞这个问题搞了大半天。

错误原因

原因就出在我到入的vue.js文件上，我是这样导入的：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/0.10.0/vue.min.js"></script>

使用BootCDN的在线vue文件链接，但是这个链接诡异之处在于，不能正常遍历数组，无法发挥v-for的功能。从而导致了我一直不能成功。
于是用官网的网址导入
在这里插入图片描述
问题解决。