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组件实现更复杂的模板和逻辑的改进,而不会影响到父单元。
相关文章推荐
- vue2.0——v-bind
- vue2.0——v-bind
- Vue2.0 Transition常见用法全解惑
- vue2.0 slot用法
- vue2.0 实现导航守卫的具体用法(路由守卫)
- 详解VUE中v-bind的基本用法
- vue2.0——v-bind
- vue2.0——v-bind
- Vue2.0 Transition的常见用法
- vue2.0——v-bind
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
- Vue2.0-4 -指令v-bind 与 v-on 缩写
- vue2.0——v-bind
- Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
- Vue-router(vue2.0)用法示例
- vue2.0 过滤器用法
- vue2.0——v-bind
- vue2.0——v-bind
- Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
- Vue2.0中 v-for指令中的key用法