<div id="app">
<input v-model="inputValue">
<button @click="handleSumbit">提交</button>
<todo-item v-for="(item,index) of list":key="index":content="item":index="index"
@delete="handleDelete"></todo-item>
</div>
子组件向父组件传递数据使用 this.$emit('delete',this.index)该方法
<script >
Vue.component('TodoItem',{
props:["content",'index'],
template:"<li @click='handleSubmit'>{{content}}{{index}}</li>",
methods:{
handleSubmit:function () {
this.$emit('delete',this.index)
}
}
})
new Vue({
el:'#app',
data:{
inputValue:'',
list:[]
},
methods:{
handleSumbit:function () {
this.list.push(this.inputValue);
this.inputValue="";
},
handleDelete:function (index) {
this.list.splice(index,1)
}
}
})
</script>
Jquery实现添加值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<input id="input" type="text">
<button id="btn">提交</button>
<ul id="list"></ul>
</div>
<script>
function Page() {
}
$.extend(Page.prototype,{
init:function () {
this.bindEvents()
},
bindEvents:function () {
var btn=$('#btn');
btn.on('click',$.proxy(this.handleBtnClick,this))
},
handleBtnClick:function () {
var inputValue=$('#input').val();
var ulElem =$('#list');
ulElem.append("<li>"+inputValue+'</li>')
}
})
var page=new Page();
page.init();
</script>
</body>
</html>
网友评论