Vue笔记，ToDoList

最新推荐文章于 2023-07-04 17:24:53 发布

7voyage

最新推荐文章于 2023-07-04 17:24:53 发布

阅读量151

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_42776455/article/details/104461425

版权

爬虫及数据分析系统设计与实施专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TODO</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		{{test}}<br>
		<input v-model="inputValue"/>
		<button @click="clickHandle">提交</button>
		<ul>
			
			<todo-item 
			v-for="(item,index) of list"
			:key= "index"
			:tttttt= "item"
			:index= "index"
			@delete= "deleteHandle"
			> 
			</todo-item>
		</ul>
	</div>
		

	<script>
	// 上面引号用双引号，下面用单引号。

		// var TodoItem = {			 局部组件
		// 	template: '<h1>h1h1h1</h1>',
		// }

		// 组件也相当于一个vue实例因此也有data，methods等等
		Vue.component('todo-item',{
			props: ['tttttt','index'],			// 接受传的值
			template: '<li @click="HandleClick">{{tttttt}}</li>',
			methods: {
				HandleClick: function(){
					this.$emit('delete',this.index)
				}
			}
		})

		new Vue({
			el: '#root',
			data: {
				test: '123',
				inputValue: '',
				list: []
			},
			// components:{ 			局部组件要注册到事例里面
			// 	'todo-item': TodoItem
			// },

			methods: {
				clickHandle: function(){
					this.list.push(this.inputValue)
					this.inputValue = ''
				},
				deleteHandle: function (index) {
					this.list.splice(index,1)
				}
			}
		})
	</script>

</body>
</html>

7voyage

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue笔记，ToDoList

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>TODO</title> <script src="./vue.js"></script></head><body> <d...
复制链接

扫一扫

专栏目录