脚本宝典收集整理的这篇文章主要介绍了Vue踩坑笔记(一),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近在用vue做的一个项目中用到组件,我想通过v-for指令,在子组件内部动态构造出li标签,添加不同的内容,在官网上没有找到在组件内部使用v-for的例子,一开始vue实例化的时候数据总是加载不出来,后来同事提示原来数据需要定义在父组件中,问题解决。下面是代码,作为记录,以后会用的着。。。
//定义一个网站质量组件
var zhiliangList=Vue.extend({ //定义一个子组件,组件内的li标签想v-for出来
template:'<li>'
+'<div class="blockDiv">'
+'<span class="shuLine" :class="item.linesy"></span>'
+'<table class="tableWidth">'
+'<tbody>'
+'<tr><td width="36%">'
+'<span :class="item.cjlogo"></span>'
+'</td>'
+'<td width="32%">'
+'<label>延时:<label class="color_3">{{item.ys}}</label> s</label>'
+'</td>'
+'<td width="32%">'
+'<label>忙时:<label class="color_3">{{item.ms}}</label> s</label>'
+'</td></tr>'
+'</tbody>'
+'</table>'
+'</div></li>',
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:'<ul><zhiliang-list v-for="item in items" :item="item"></zhiliang-list></ul>',
data:function(){
return {
items:zhiliangArray
}
},
components:{
'zhiliang-list':zhiliangList
}
});
以上是脚本宝典为你收集整理的Vue踩坑笔记(一)全部内容,希望文章能够帮你解决Vue踩坑笔记(一)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。