使用组件改造TodoLIst

最新推荐文章于 2021-11-30 09:40:26 发布

VVVGG

最新推荐文章于 2021-11-30 09:40:26 发布

阅读量262

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/VVVZCS/article/details/82285501

版权

Vue 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
		<input type="" name="" v-model = 'inputvalue'>
		<button type="" v-on:click = 'btnClick'>提交</button>
		<ul>
			<todo-item v-bind:content = 'item'
					   v-for = 'item in list'>
				
			</todo-item>
		</ul>
	</div>
	<script>
		Vue.component("TodoItem", {
			props : ['content'],
			template : '<li>{{content}}</li>'
		});
		var app = new Vue({
			el : '#app',
			data : {
				list : [],
				inputvalue : ''
			},
			methods : {
				btnClick : function () {
					this.list.push(this.inputvalue);
					this.inputvalue = '';
				}
			}
		});
	</script>
</body>
</html>

首先我们定义了一个component一个全局组件，名字是TodoItem，所以我们可以直接在Html中使用我们的组件，然后通过v-for来决定到底要输出多少个TodoItem这个组件，同时将每一个v-for的item内容通过v-bind保存在content中，且传递给todo-item这个组件，然后通过props来进行接收，再在模板template中使用content（最后todo-item标签会被component模板中的标签templeate所替换）

刚才是全局组件的方法，现在讲一下局部组件的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
		<input type="" name="" v-model = 'inputvalue'>
		<button type="" v-on:click = 'btnClick'>提交</button>
		<ul>
			<todo-item v-bind:content = 'item'
					   v-for = 'item in list'>
				
			</todo-item>
		</ul>
	</div>
	<script>
		var TodoItem = {
			props : ['content'],
			template : '<li>{{content}}</li>'
		}
		var app = new Vue({
			el : '#app',
			components : {
				TodoItem : TodoItem
			},
			data : {
				list : [],
				inputvalue : ''
			},
			methods : {
				btnClick : function () {
					this.list.push(this.inputvalue);
					this.inputvalue = '';
				}
			}
		});
	</script>
</body>
</html>

VVVGG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用组件改造TodoLIst

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Hello World&lt;/title&gt; &lt;script src="vue.js" type="text/java
复制链接

扫一扫

专栏目录