第一次接触神奇的前端框架vue.js

<td><button @click="update(index)">update</button></td>
</tr>
</tbody>
</table>
</div>

</div>
<script>

Array.prototype.arrIndex=function(obj){
for(let i=0;i<this.length;i++){
var tmp=this[i];
if(tmp==obj){
return i;
}
}
}

var vm=new Vue({
el:'#app',
data:{
editLock:1,
newPerson:{
id:0,
name:'',
age:0,
sex:'male'
},
persons:[{
id:1,
name: 'Jack',
age: 30,
sex: 'Male'
}, {
id:2,
name: 'Bill',
age: 26,
sex: 'Male'
}, {
id:3,
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
id:4,
name: 'Chris',
age: 36,
sex: 'Male'
}] },
methods:{
create:function(){
this.persons.push(this.newPerson);
this.newPerson={id:0,name:'',age:0,sex:'male'};
},
createorupdate:function(){
if(this.editLock===1){
this.persons.push(this.newPerson);
}else{
//删除老对象
var aindex=this.persons.arrIndex(this.newPerson);
console.log(aindex);
this.persons.splice(aindex,1);
//插入新对象
this.persons.push(this.newPerson);
}

this.newPerson={id:0,name:'',age:0,sex:'male'};
},
deletePerson:function(idx){
this.persons.splice(idx,1);

},
update:function(idx){
var p =this.persons[idx];
this.editLock=0;
this.newPerson=p;
}

}
})
</script>
</body>

</html>

参考资料:

https://cn.vuejs.org/v2/guide/routing.html

//www.jb51.net/article/98791.htm

//www.jb51.net/article/96426.htm

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。