Vue的Todolist改进

最新推荐文章于 2020-03-11 11:50:09 发布

edward_LL

最新推荐文章于 2020-03-11 11:50:09 发布

阅读量150

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/edward_LL/article/details/90243156

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用局部组件，点击列表可以删除指定的一项

<body>
	<div id='app'>
		<input type="text" v-model="inputValue"/><br>
		<input type="text" v-model:lazy="inputValue"/>
		<button v-on:click="handleBtnClick">点击</button>
		<ul>
			<todo-item v-bind:content="item"
			           v-bind:index="index"
					   v-for="(item,index) in list"
					   @delete="handleItemDelete">
			</todo-item>
		</ul>
	</div>
    <script>
		// //全局组件
		// Vue.component("TodoItem", {
		// 	props:['content'],
		// 	template: "<li>{{content}}</li>",
		// })

        //局部组件
        var TodoItem = {
			props:['content','index'],
			template: "<li @click='handleItemClick'>{{content}}</li>",
			methods:{
				handleItemClick:function(){
					this.$emit("delete", this.index)  //向父组件触发事件
				}
			}
		}

    	var app = new Vue({
    		el: '#app',
			//注册组件（局部组件）
			components:{
				TodoItem: TodoItem
			},
    		data: {
    			list: [],
    			inputValue:''
    		},
    		methods: {
    			handleBtnClick: function () {
    				this.list.push(this.inputValue)
    				this.inputValue = ''
    			},
				handleItemDelete: function(index) {
					this.list.splice(index,1)
				}
    		}

    	})
    </script>
</body>

edward_LL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的Todolist改进

使用局部组件，点击列表可以删除指定的一项<body> <div id='app'> <input type="text" v-model="inputValue"/><br> <input type="text" v-model:lazy="inputValue"/> <button v-on:click="hand...
复制链接

扫一扫