<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li is="veb" v-for="item in list" :item=item></li>
</ul>
<veb1 :name="name"></veb1>
<veb2 :na="na"></veb2>
</div>
</body>
<script>
Vue.component("veb",{
props:["item"],
data:function(){
return{
it:this.item
}
},
computed:{
},
template:"<li><h1>{{it.name}}</h1><p>{{it.price}}</p></li>",
})
//进行二次修改，父组件发生改变，子组件会跟着改变
Vue.component("veb1",{
props:["name"],
computed:{
p:function(){
return this.name+"哈哈"
}
},
template:"<h1>{{p}}</h1>",
})
//作为初始值传进来，作为局部数据的使用，父组件发生改变，子组件不会跟着改变
Vue.component("veb2",{
props:["na"],
data:function(){
return{
it:this.na,
}
},
template:"<h1>{{it}}</h1>",
})
var box=new Vue({
el:"#box",
data:{
list:[
{
name:"苹果",
price:"10块一斤"
},
{
name:"香蕉",
price:"14块一斤"
},
{
name:"西瓜",
price:"12块一斤"
},
],
name:"结算",
na:"你好"
}
})
</script>
</html>
网友评论