<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<!--标签语义话-->
<li is="veb" v-for="item in list" :item=item ></li>
</ul>
</div>
</body>
<script>
//商品信息,父子通信中父到子的传递
Vue.component("veb",{
props:["item"],
//:后的是变量名，双引号必须要有,这个item只能在这个template中使用,相当与是data中的数据
template:"<li><h1>{{item.name}}</h1><p>{{item.price}}</p></li>",
})
var box=new Vue({
el:"#box",
data:{
list:[
{
name:"苹果",
price:"10块一斤"
},
{
name:"香蕉",
price:"14块一斤"
},
{
name:"西瓜",
price:"12块一斤"
},
]
}
})
</script>
</html>
网友评论