资讯专栏INFORMATION COLUMN

Vue踩坑笔记(一)

didikee / 1666人阅读

摘要:下面是代码,作为记录,以后会用的着。。。定义一个网站质量组件定义一个子组件,组件内的标签想出来延时忙时网站质量数据定义父组件,在父组件内部注册子组件

最近在用vue做的一个项目中用到组件,我想通过v-for指令,在子组件内部动态构造出li标签,添加不同的内容,在官网上没有找到在组件内部使用v-for的例子,一开始vue实例化的时候数据总是加载不出来,后来同事提示原来数据需要定义在父组件中,问题解决。下面是代码,作为记录,以后会用的着。。。

//定义一个网站质量组件
    var zhiliangList=Vue.extend({   //定义一个子组件,组件内的li标签想v-for出来
          template:"
  • " +"
    " +"" +"" +"" +"" +"" +"" +"" +"
    " +"" +"" +"" +"" +"" +"
    " +"
  • ", props:["item"] }); //网站质量数据 var zhiliangArray=[{ ys:"2.48", ms:"3.13", cjlogo:"taobao_logo", linesy:"redLine" }, { ys:"2.48", ms:"3.13", cjlogo:"jd_logo", linesy:"orangeLine" }, { ys:"1.98", ms:"2.83", cjlogo:"souhu_logo", linesy:"yellowLine" }, { ys:"1.48", ms:"2.53", cjlogo:"sina_logo", linesy:"greenLine" }, { ys:"1.08", ms:"2.13", cjlogo:"wangyi_logo", linesy:"blueLine" }]; Vue.component("zhiliang",{ //定义父组件,在父组件内部注册子组件 template:"
    ", data:function(){ return { items:zhiliangArray } }, components:{ "zhiliang-list":zhiliangList } });

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/88165.html

    相关文章

    • vant DatetimePicker 踩坑笔记

      摘要:是有赞出的一个基于的组件库。最近要做一个滚动选择日期的日历找到了它,感觉文档不够细致,缺少足够的代码。一开始我只使用了设置选中值,结果发现当前选项内容改了但是其它选项全部消失,所以还得加上重新设置一遍被选值。可查看实例详细信息。 vant是有赞出的一个基于vue的组件库。最近要做一个滚动选择日期的日历找到了它,感觉文档不够细致,缺少足够的demo代码。以下是我的踩坑之处: Events...

      sihai 评论0 收藏0
    • 关于Vue2些值得推荐的文章 -- 五、六月份

      摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

      sutaking 评论0 收藏0
    • 关于Vue2些值得推荐的文章 -- 五、六月份

      摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

      khs1994 评论0 收藏0
    • (原创)vue 学习笔记

      摘要:菜鸟教程这是一个属性其值是字符串菜鸟教程同上这是一个属性其值是字符串用于定义的函数,可以通过来返回函数值。它们都有前缀,以便与用户定义的属性区分开来。 开篇语 我最近学习了js,取得进步,现在学习vue.js.建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧参照菜鸟教程网站的vue.js教程http://...

      layman 评论0 收藏0

    发表评论

    0条评论

    didikee

    |高级讲师

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <