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的功能。从而导致了我一直不能成功。
于是用官网的网址导入
问题解决。