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 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
vue--vuex详解
Apr 15 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 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 验证登陆类分享
2015/03/13 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
jQuery 位置插件
2008/12/25 Javascript
javascript json2 使用方法
2010/03/16 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
python中字符串前面加r的作用
2015/06/04 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
python实现猜单词游戏
2020/05/22 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
python对一个数向上取整的实例方法
2020/06/18 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
暑期培训班招生方案
2014/08/26 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
全新239军机修复记
2022/04/05 无线电