03 vue 使用组件优化Todo List功能第三篇

技术~子云

已于 2022-10-22 19:40:08 修改

阅读量81

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2022-10-21 08:45:51 首次发布

本文链接：https://blog.csdn.net/davice_li/article/details/127438856

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="./vue.js"></script>
</head>
<body>
    
	<div id="app">
		<!--双向绑定v-model-->
		<input type="text" v-model="inputValue">
		<!--绑定click事件handleBtnClick-->
		<button v-on:click="handleBtnClick">提交</button>
		<ul>
			<!--循环遍历列表list中的每一个值,并赋值给item-->
			<todo-Item v-bind:content="item" v-for="item in list"></todo-Item>
			
		</ul>
	</div>
	<script type="text/javascript">
		//全局组件
		// Vue.component("TodoItem",{
		// 			props:['content'],
		// 			template:"<li>{{content}}</li>"
		// })

		var TodoItem ={
			props:['content'],
			template:"<li>{{content}}</li>"
		}
		var app = new Vue({
			el:"#app",
			//注册局部组件
			components:{
				TodoItem:TodoItem  
			},
			data:{
				list:[],
				inputValue:""
			},
			methods:{
				handleBtnClick:function(){
					//alert(this.inputValue)
					this.list.push(this.inputValue),
					this.inputValue=''
				}
			}
		})
	</script>
</body>
</html>