vue.js基础之使用组件改造TodoList

最新推荐文章于 2021-09-26 09:37:24 发布

前端yyds无敌

最新推荐文章于 2021-09-26 09:37:24 发布

阅读量82

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/hdb2405474279/article/details/119413080

版权

vue.js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文介绍了如何在 Vue.js 中使用 v-bind 绑定数据到元素属性，并展示了如何实现双向数据绑定和事件绑定。通过示例代码创建了一个简单的待办事项列表，当用户输入并点击提交按钮时，内容将被添加到列表中。同时，利用组件化思想，创建了 TodoItem 局部组件来渲染每个待办事项。

摘要由CSDN通过智能技术生成

v-bind 用于绑定数据和元素属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script><!-- 引入vue -->
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="inputValue"/><!-- 双向绑定 -->
			<button v-on:click="handleBtnClick">提交</button><!-- 绑定事件 -->
			<ul>
				<!-- <li v-for="item in list">{{item}}</li>循环list数据 -->
				<todo-item v-bind:content="item" v-for="item in list"></todo-item>
			</ul>
		</div>
		<script>
		//全局组件
		// Vue.component("TodoItem",{
		// 	props:['content'],//接收v-bind绑定的content
		// 	template:"<li>{{content}}</li>"
		// })
		
		//局部组件，需要在根vue实例里面components说明
		var TodoItem = {
			props:['content'],
			template:"<li>{{content}}</li>"
		}
		
			var app = new Vue({
				el:'#app',
				components:{
					TodoItem:TodoItem,
				},
				data:{
					list:[],
					inputValue:''
				},
				methods:{
					handleBtnClick:function(){//点击button使用此函数
						this.list.push(this.inputValue)//数组新增数据
						this.inputValue = ''//每提交一次清空输入框内容
					}
				}
			})
		</script>
	</body>
</html>