1_4 组件的使用 component

最新推荐文章于 2024-08-04 16:33:59 发布

上晴下雪

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量127

点赞数

分类专栏： vue 文章标签： vue javascript js html

本文链接：https://blog.csdn.net/xueerkeji/article/details/106042583

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

组件的使用 component

<!DOCTYPE html>
<html>
<head>
	<title>组件的使用 component</title>
	<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" id='input' v-model="todoValue"/>
		<button id="btn" v-on:click="handle">提交</button>
		<ul>
			<todo-list v-bind:content="item" v-for="item in list"></todo-list>
		</ul>
	</div>
	<script type="text/javascript">
		var tl={
			props:['content'],
			template:"<li>{{content}}</li>"
		}
		var app = new Vue({
			el:'#app',
			//组件
			components:{
				TodoList:tl
			},
			data:{
				todoValue:"",
				list:[]
			},
			methods:{
				handle:function(){
					this.list.push(this.todoValue)
					this.todoValue=''
				}
			}
		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>注册或获取全局组件</title>
	<script type="text/javascript" src="./vue.js"></script>

</head>
<body>
	<div id="app">
		<input type="text" id='input' v-model="todoValue"/>
		<button id="btn" v-on:click="handle">提交</button>
		<ul>
            <!-- 创建一个 todo-item 组件的实例 -->
			<todo-list v-bind:content="item" v-for="item in list"></todo-list>
		</ul>
	</div>
	<script type="text/javascript">
		//注册或获取全局组件 名称：todo-item
		Vue.component("TodoList",{
			props:['content'],
			template:"<li>{{content}}</li>"
		});
		var app = new Vue({
			el:'#app',
			data:{
				todoValue:"",
				list:[]
			},
			methods:{
				handle:function(){
					this.list.push(this.todoValue)
					this.todoValue=''
				}
			}
		})
	</script>
</body>
</html>

上晴下雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1_4 组件的使用 component

组件的使用 component<!DOCTYPE html><html><head> <title>组件的使用 component</title> <script type="text/javascript" src="./vue.js"></script></head><body> <div id="app"> <input type="text" i...
复制链接

扫一扫

专栏目录