todolist組件拆分

妖精的绣舞 提交于 2019-11-29 11:46:08
<!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>

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!