vue.js实现简单CRUD的代码
程序员文章站
2022-03-29 20:57:42
一、项目用到了vue，上周五写了一个小demo给同事，今天发出来，记录一下，也希望能对其他人了解vue工作有些帮助吧。
二、直接上代码吧
一、项目用到了vue，上周五写了一个小demo给同事，今天发出来，记录一下，也希望能对其他人了解vue工作有些帮助吧。
二、直接上代码吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
<table border=1>
<tbody>
<tr v-for="text,index in info">
<td>姓名:</td>
<td>{{text.name}}</td>
<td>联系方式:</td>
<td>{{text.phone}}</td>
<td>
<input name="checkbox" type="checkbox" @click="getIndex(index)">
</td>
</tr>
</tbody>
</table>
<input type="button" value="update" @click="update">
<input type="button" value="add" @click="add">
<input type="button" value="delete" @click="mdelete">
</p>
<script>
var vm = new Vue({
el: '#app',
data: {
index: [],
info: [
{ name: 'a',phone:'12313'},
{ name: 'b',phone:'12313'},
{ name: 'c',phone:'12313'}
],
n: 1
},
methods:{
update:function(){
vm.info =
[{name: '赵',phone:'1111'},
{ name: '钱',phone:'2222'},
{ name: '孙',phone:'3333'}];
},
add:function(){
var index = vm.info.length;
vm.info.push({name:'测试'+vm.n,phone:'电话'+vm.n});
vm.n++;
},
getIndex:function(index){
vm.index.push(index);
},
mdelete:function(){
for(var j=0;j<vm.index.length;j++){
vm.info.splice(vm.index[j+1],1);
}
for(var i=0;i<document.all.length;i++){
if (document.all(i).type=="checkbox"){
document.all(i).checked=false;
}
}
}
}
})
</script>
</body>
</html>
三、直接在浏览器里面运行即可...
上一篇： win10系统Pycharm配置spark环境教程
下一篇： 老妈还是疼我的