Vue 简单组件转值
<!DOCTYPE html>
<html>
<head>
<title>简单的组件间传值</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" id='input' v-model="todoValue"/>
<button id="btn" v-on:click="handle">提交</button>
<ul>
<todo-list
v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@fdel="ddel"
>
</todo-list>
</ul>
</div>
<script type="text/javascript">
var tl={
//props 从父作用域将数据传到子组件
props:['content','index'],
template:"<li v-on:click='del'>{{content}}</li>",
methods:{
del:function(){
this.$emit('fdel',this.index)
}
}
}
var app = new Vue({
el:'#app',
components:{
TodoList:tl
},
data:{
todoValue:"",
list:[]
},
methods:{
handle:function(){
this.list.push(this.todoValue)
this.todoValue=''
},
ddel:function(index){
this.list.splice(index,1);
}
}
})
</script>
</body>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
