实现目的:一个按钮,如增加按钮,每点击一次,增加一行;删除就是点击增加的行标签,移除点击的此标签
jquery实现方法:DOM节点操作,当点击增加按钮,在下方创建一个新的行标签;当点击创建的标签时自动移除。
具体实现方法如下所示:
<div id="app">
<!--<button class="btn" οnclick="btn()">增加标签</button>-->
<button class="btn" >增加标签</button>
<ul>
</ul>
</div>
jquery操作方法,主要就是传参和remove()方法实现,对比下列两种操作过程
var count=0;
function btn(){
$("ul").append("<li οnclick='delFn("+count+")' class='a"+count+"'>"+count+"部分</li>")
count++;
}
function delFn(e){
$(".a"+e).remove();
}
$(".btn").on('click',function(){
$("ul").append("<li>"+count+"部分</li>")
count++;
delFn($("li"));
})
function delFn(e){
e.on('click',function(){
$(this).remove();
})
}
vue实现方法:无DOM节点操作,数据的操作改变DOM节点。
重点:父组件向子组件传递属性,props接收,子组件向父组件传值,使用$emit函数自定义事件和父组件一致,触发父组件操作事件;注册模板template
具体实现如下:
<div id="app">
<button class="btn" @click="addFn">{{btn}}</button>
<ul>
<!--<li v-for="(item,index) of list" v-bind:key="index" v-on:click="delFn(index)">{{item}}部分</li>-->
<li-item
v-for="(item,index) in list"
:key="index"
v-bind:content="item"
:index="index"
@dell="delFn"
>
</li-item>
</ul>
</div>
如果不使用模板,直接在组件内操作,数组的移入移出实现:
var count=0;
new Vue({
el:"#app",
data:{
btn:"增加按钮",
list:[],
},
methods:{
addFn:function(){
this.list.push(count);
count++;
},
delFn:function(e){
this.list.splice(e,1);
}
}
})
如果使用模板化操作,需要在子组件内自定义事件触发父组件内的操作事件,对应的事件传递。
Vue.component("li-item",{
props:['content','index'],
template:"<li @click='del'>{{content}}部分</li>",
methods:{
del:function(){
this.$emit('dell',this.index);
}
}
})
new Vue({
el:"#app",
data:{
btn:"增加按钮",
list:[],
},
methods:{
addFn:function(){
this.list.push(count);
count++;
},
delFn:function(index){
this.list.splice(index,1);
}
}
})
参考位置:https://github.com/yijianchuanxinwq/adelDom.git