Vue中的v-for指令不起效果的解决方法


Posted in Javascript onSeptember 27, 2018

我的代码之前类似下面的结构

<div id="example-1" v-for="item in items">
 <ul>
  <li>
   {{ item.message }}
  </li>
 </ul>
</div>

结果发现不好用,数据读入了但是没有显示

于是我后来看官网的例子才明白,原来是id和v-for不在一个层级上,官网的例子如下,我按照不在一个层级上改,果然好用了

<ul id="example-1">
 <li v-for="item in items">
  {{ item.message }}
 </li>
</ul>

以上这篇Vue中的v-for指令不起效果的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
JS模板实现方法
Apr 03 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 #Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 #Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 #Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 #Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 #Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 #Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 #Javascript
You might like
php单态设计模式(单例模式)实例
2014/11/18 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
ES6函数和数组用法实例分析
2020/05/23 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python字符串的修改方法实例
2019/12/19 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
Python如何实现FTP功能
2020/05/28 Python
浅谈Python中的继承
2020/06/19 Python
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
化学教师教学反思
2014/01/17 职场文书
优秀团队获奖感言
2014/02/19 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
廉政教育的心得体会
2014/09/01 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
体育部部长竞选稿
2015/11/21 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
python基础之模块的导入
2021/10/24 Python