您的位置:首页 > 产品设计 > UI/UE

vue2.0 v-bind的用法

2017-03-18 12:48 309 查看
<div id="app-7">
<ol>
<!-- 现在我们为每个todo-item提供待办项对象    -->
<!-- 待办项对象是变量,即其内容可以是动态的 -->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: '蔬菜' },
{ text: '奶酪' },
{ text: '随便其他什么人吃的东西' }
]
}
})

这只是一个假设的例子,但是我们已经设法将应用分割成了两个更小的单元,子单元通过 
props
 接口实现了与父单元很好的解耦。我们现在可以进一步为我们的 
todo-item
 组件实现更复杂的模板和逻辑的改进,而不会影响到父单元。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: