c语言学生信息管理系统框架,vue实现学生信息管理系统

本文实例为大家分享了vue实现学生信息管理系统的具体代码，供大家参考，具体内容如下

界面

代码

vue--学生信息管理系统

.title{margin:20px;font-weight: bold;font-size: 20px;}

学生信息管理系统

学号	姓名	年龄	操作

全部数据

• {{stu.no}}

//创建一个Vue的实例

var vm = new Vue({

el: "#app", //获取根节点

data: {

no:"",

name:"",

age:"",

list:[

{

no:"001",

name:"TOM",

age:18,

},{

no:"002",

name:"Juy",

age:19,

},

{ no:"003",

name:"Mlo",

age:20,

}

],

//设置样式

render_table:{"width":"700px","text-align":"center"},

render_form:{"width":"300px","text-align":"center","margin-top":"50px"}

},

methods:{

// 添加方法

add(){

this.list.push({no:this.no,name:this.name,age:this.age});

this.no="";this.name="";this.age="";

},

//删除方法

del(i){

if(confirm("确定删除吗？")){

this.list.splice(i,1);

}

}

}

})

知识点

双向数据绑定

文本插值

事件绑定

方法定义

数据遍历

样式设置

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

时间： 2020-05-28