界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jquery.js才可以看见效果。
这里提供bootstrap的在线文件给大家引用:
效果如下图所示,输入用户名和年龄,点击添加,数据会自动添加到下面的用户信息表内。当没有数据时,用户信息表显示:暂无数据……,当有数据时,显示 删除全部 按钮,这里为了方便快捷,我没有做删除按钮的弹出框,所以 点击删除按钮 会直接删除掉当前这条数据。
立即学习“前端免费学习笔记(深入)”;


传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目,如果修改栏目,需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML,安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据,安装时可选择演示安装或全新安装。如果全新安装,后台内容充实后,首页才能完全显示出来。(全新安装后可以删除演示数据用到的图片,目录在https://
| 序号 | 名字 | 年龄 | 操作 |
|---|---|---|---|
| {{index+1}} | {{item.name}} | {{item.age}} | |
|
暂无数据…… |
|||
window.onload = function(){
new Vue({
el:"#box",
data:{
myData:[],
username:'',
age:'',
nowIndex:-100
},
methods:{
add:function(){
this.myData.push({
name:this.username,
age:this.age
});
this.username='';
this.age='';
},
deleteMsg:function(){
this.myData.splice(0,1)
},
all:function(){
this.myData = [];
}
}
})
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持PHP中文网。
更多Bootstrap + Vue.js实现添加删除数据相关文章请关注PHP中文网!









