打卡:第11天 ,必须发够100个知识点,每天进步1%. 热爱学习不能自拔, 哈哈、明天要见面谈客户, 有个琅东得客户需要开发一套(小程序商城:www.zkelm.com),所以今晚不熬夜了,虽然熬夜一直爽! 困难点: 比如减肥,都知道少吃,但是就控制不住,怎么控制自己呢? 世界上的一切难题就存在这里
Vue动态props 如何实现动态的输入,并在component里面显示, 使用的办法是 v-bind 而 v-model绑定的必须是双向绑定
<div id="app">
<input type="text" v-model:value="promsg"/>
<zkelm v-bind:message="propmsg"></zkelm>
</div>
<script>
new Vue({
el:"#app",
data:{
propmsg:"小程序开发:www.zkelm.com"
},
components:{
zkelm:{
props:['message'],
template:"<b>{{message}}</b>"
}
}
})
</script>
运行结果:小程序开发:www.zkelm.com
而且当你更改 input的值的时候 会组件的渲染值也会跟着改变
list使用component组件渲染多个li元素,
<div id="app">
<ul>
<zkelm v-for="item in sites" v-bind:message="item"> </zkelm>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
sites:[11,22,33,44,55,66,77,88]
},
components:{
zkelm:{
props:['message'],
template:"<li>{{message}} </li>"
}
}
})
</script>
运行结果:
**props:[arr1,arr2,arr3] 支持多参数传入
<div id="app">
<zkelm arr1="专业小程序开发:" arr2="www.zkelm.com" ></zkelm>
</div>
<script>
new Vue({
el:"#app",
components:{
zkelm:{
props:['arr1','arr2'],
template:"<b>{{arr1}}{{arr2}}</b>"
}
}
})
</script>
输出结果:专业小程序开发:www.zkelm.com