这个全局组件没有效果，求大神指导
晚上加班的程序媛
2018-12-18 17:21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> todoList编写</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="toDo">
<div>
<input v-model="inPutValue" >
<button @click="handelSubmit">提交</button>
</div>
<ul>
<!-- <li v-for='(item,index) of list' :key="index">{{item}}</li> -->
<todo-item> </todo-item>
</ul>
</div>
<script type="text/javascript">
//定义组件 这是全局组件，template里是模板，相当于定义一个标签
Vue.component('todo-item',{
template:'<li>{{item}}</li>'
})
new Vue({
el:'#toDo',
data:{
inPutValue:'please Write Here',
list:[]
},
methods:{
handelSubmit:function(){
this.list.push(this.inPutValue),
this.inPutValue=''
}
}
});
</script>
</body>
</html>
2回答
-
- 慕侠2155777
- 2018-12-27 13:41:40
item 没有传进来 ，默认为空 把{{}}去掉会当做字符串来处理 ，所以会显示item
-
- 锅里的鲸鱼
- 2018-12-18 19:03:29
Vue.component('todo-item',{
template:'<li>{{item}}</li>'
})这里的item不需要{{}}
vue2.5入门
146229 学习 · 657 问题
相似问题
回答 2
回答 2
回答 1
回答 2
回答 4