<!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>
修改props值
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 之前好像没这么使用过，之前的思维是把对象取出来以后，修改的是新对象属性的值，然后给原来对象重新赋值。然而这个是类似...
