- v-bind:title="message"
将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致
- v-bind 和 props
子单元通过 prop 接口与父单元进行解耦
html 代码
<div id="app">
<todo-item v-for="item in groceryList"
:todo="item">
:key="item.id"
</todo-item>
</div>
JavaScript 代码
<script>
new Vue({
el: "#app",
data: {
groceryList: [
{id:1, text: 'a'},
{id:2, text: 'b'}
]
},
components: {
'todo-item': {
props: ["todo"],
template: "<li>{{todo.text}}</li>"
}
}
})
</script>
