vue示例之显示文章列表,重点关注下图片属性用属性绑定显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文章列表</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!--arts对应下面vm中data里面的arts,articles自定义的名字 -->
<article-list :articles="arts"></article-list>
</div>
</body>
</html>
<script type="text/javascript">
var articles = {
template:`
<ul>
<li v-for='article ,index in articles' :key=index>
<h1>{{article.title}}</h1>
<img :src= 'article.src' />
<p>{{article.desc}}</p>
</li>
</ul>
`,
// articles这个名字就是上面自定义的名字
props:['articles'],
};
var vm = new Vue({
el:'#app',
data:{
arts:[
{title:'this is title1',src:'img/01.jpg',desc:'this is desc1'},
{title:'this is title2',src:'img/01.jpg',desc:'this is desc2'},
{title:'this is title3',src:'img/01.jpg',desc:'this is desc3'},
],
},
components:{
'article-list':articles,
}
});
</script>
2730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
