<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist组件拆分</title>
<script src="../2.5.20-vue.js"></script> <!--//提前加载，避免出现抖屏-->
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for = "(item, index) of list" :key="index"
:content = "item"
></todo-item>
</ul>
</div>
<script>
Vue.component("todo-item", { //全局定义的组件
// props: ['content'], //我这个小组件定义接收从外面传过来的content的属性值
template: '<li>{{content}}</li>'
});
/* var TodoItem = { //局部变量定义的组件
template: '<li>item</li>'
}*/
new Vue({
el: '#root', /**创建vue的实例，接管id等于root的内容*/
data: {
inputValue: "",
list: []
},
methods: {
handleSubmit(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
todolist组件拆分
猜你喜欢
转载自blog.csdn.net/xuxinwen32/article/details/86673831
今日推荐
周排行