本文适用于Web入门级或偏中级前端爱好者等,内容是作者在51CTO的学习笔记,提交于github,有时候也没时间更新CSDN,github对于部分同学可能也有一定的难度,本着开源的精神,较入门偏引导的小篇幅学习资料进行分享,希望对大家有帮助,也感谢大家的三联,我们走起!学到知识就好哦!知识版权申明,本知识体系是51CTO某位老师的课程,鉴于老师已在51CTO取得收益,故我不再进行版权申明和导流并作为知识技能分享,也希望老师看到能理解。
7_v-for渲染
7_1渲染数组和对象元素
- v-for
7_2计算属性和列表渲染
- ul
- li
7_3示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7_v-for渲染</title>
</head>
<body>
<!--DOM-->
<div id="app">
<h4>商品列表</h4>
<ul>
<li v-for="(goods,index) in goodsLists">{{index+1}}---{{goods.name}}---{{goods.price}}</li>
</ul>
<ul>
<li v-for="goods in goodsLists">
<ul>
<li v-for="(value,key,index) in goods">{{index}}---{{key}}---{{value}}</li>
</ul>
</ul>
<div>
<ul>
<li v-for="goods in filterGoodsLists">{{goods.name}}---{{goods.price}}</li>
</ul>
</div>
</div>
<!--引入vue-->
<script src="../js/vue.js"></script>
<!--javascript-->
<script>
<!--vue&javascript-->
var data={
goodsLists:[
{name:'apple',price:'9999'},
{name:'huawei',price:'2012'},
{name:'oppo',price:'9872'}
]
};
var vm=new Vue({
el:'#app',
data:data,
computed:{
filterGoodsLists:function(){
return this.goodsLists.filter(function(goods){
return goods.price>3000;
})
}
}
});
</script>
</body>
</html>