todolist組件拆分

最新推荐文章于 2022-07-19 21:00:48 发布

hongxiao2016

最新推荐文章于 2022-07-19 21:00:48 发布

阅读量115

点赞数

分类专栏： # Vue

本文链接：https://blog.csdn.net/hongxiao2016/article/details/100802748

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TodoList組件拆分</title>
<script src="vue.js"></script>
</head>

<body>
<div id="root">
  <input v-model="inputValue"/>
  <button @click="handleClick">提交</button>
  <ul>
    <todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
  </ul>
</div>
<script>
    Vue.component('todo-item',{
        props:['content'],
        template:'<li>{{content}}</li>'
    })
		new Vue({
			el:"#root",
			data:{
                inputValue:"",
                list:[]
			},
            methods:{
                handleClick: function(){
                    this.list.push(this.inputValue);
                    this.inputValue=" "
                }
            }
		})
	</script>
</body>
</html>

hongxiao2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
todolist組件拆分

<!doctype html><html><head><meta charset="utf-8"><title>TodoList組件拆分</title><script src="vue.js"></script></head><body><div id=...
复制链接

扫一扫

专栏目录