Vue.js的小片段——Vue中一个组件的v-for(props,is="todo-item")

WEB前端 waitig 704℃ 百度已收录 0评论
注意这里的 is="todo-item" 属性。这种做法在使用 DOM 模板时是十分必要的,因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。
这样做实现的效果与 <todo-item> 相同,但是可以避开一些潜在的浏览器解析错误。

注意2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。
HTML内容:

<div id="todo-list-example">
    <input v-model="newTodoText"  v-on:keyup.enter="addNewTodo" placeholder="Add a todo">
    <ul>
        <li 
            is="todo-item"
	    v-for="(todo, index) in todos"
	    v-bind:key="todo.id"
	    v-bind:title="todo.title"
	    v-on:remove="todos.splice(index, 1)"
	>
        </li>
     </ul>
</div>


JS内容:
然而,任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传递到组件里,我们要用 props

Vue.component('todo-item', {
    template: '\
        <li>\
           {{ title }}\
           <button v-on:click="$emit(\'remove\')">X</button>\
        </li>\
	  ',
    props: ['title']
});


new Vue({
    el: '#todo-list-example',
    data: {
       /* -- this.newTodoText = '' 是为了让input的value值为空,避免要用户先删除原来的value值,才可以输入自己想要输入的值 --- */

       newTodoText: '',
       todos: [
	    {
	      id: 1,
	      title: 'Do the dishes',
	    },
	    {
	      id: 2,
	      title: 'Take out the trash',
	    },
	    {
	      id: 3,
	      title: 'Mow the lawn'
	    }
	  ],
        nextTodoId: 4
     },
    methods: {
	addNewTodo: function () {
	   this.todos.push({
	      id: this.nextTodoId++,
	      title: this.newTodoText
	   });
	   this.newTodoText = '';
        }
    }
});


本文由【waitig】发表在等英博客
本文固定链接:Vue.js的小片段——Vue中一个组件的v-for(props,is="todo-item")
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)