Vue 简易信息管理

最新推荐文章于 2023-03-01 00:39:35 发布

ThXe

最新推荐文章于 2023-03-01 00:39:35 发布

阅读量353

点赞数 5

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/thexue/article/details/121010585

版权

基本信息框架

实现步骤

1.导入Vue源码

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js" charset="UTF-8"></script>

2.将html与Vue绑定

<div id="app" v-cloak></div>
script type="text/javascript">
	var  vm= new Vue({
		el:"#app",
		data:{
		}
	})

</script>

3.建立students数组存储基本信息，并打印在屏幕上

（1) table：表格
（2) tr:行
（3）td：列
（4）循环输出 v-for（xx in xxx）

<<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="app" v-cloak>
	<table>
		<thead>
		<tr> <td>姓名</td> <td>年龄</td> <td>性别</td></tr>
		</thead>
		<tbody>
		<tr v-for="student in students" >
			<td>{{student.name}}</td>
			<td>{{student.age}}</td>
			<td>{{student.sex}}</td>
		</tr>

		</tbody>
	</table>
</div>
<script type="text/javascript">
	var  vm= new Vue({
		el:"#app",
		data:{
			students:[
				{name:"张三",age:20,sex:"男"},
				{name:"李四",age:30,sex:"女"},
				{name:"王五",age:40,sex:"男"}
			]
		}
	})

</script>
</body>
</html>

第一部分实现效果

在这里插入图片描述

实现增添信息的功能

实现步骤`

1.在date中新建一个临时储存数据 newStudent
2.v-model 实现双向绑定

    <label for="username">用户名:</label>
    <input type="text" id="username" placeholder="请输入用户名" v-model="newStudent.name"/>

3.@click 绑定按钮，触发creatNewstudent
unshift将这个新添加的学生加入数组中

       this.students.unshift(this.newStudent);
       this.newStudent={name:"",age:0,sex:"男"}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js" charset="UTF-8"></script>
</head>
<body>
      <div id="app" v-cloak>
          <label for="username">用户名:</label>
          <input type="text" id="username" placeholder="请输入用户名" v-model="newStudent.name"/>

          <label for="">年龄:</label>
          <input type="text" id="" placeholder="请输入年龄" v-model="newStudent.age"/>

          <label for="">性别:</label>
          <select id="" v-model="newStudent.sex">
              <option value="男">男</option>
              <option value="女">女</option>

          </select>
          <button @click="creatNewstudent">创建新用户</button>>
          <table>
              <thead>
              <tr> <td>姓名</td> <td>年龄</td> <td>性别</td></tr>
              </thead>
              <tbody>
              <tr v-for="student in students" >
                  <td>{{student.name}}</td>
                  <td>{{student.age}}</td>
                  <td>{{student.sex}}</td>
              </tr>

              </tbody>
          </table>
      </div>
    <script type="text/javascript">
        var  vm= new Vue({
            el:"#app",
            data:{
                students:[
                    {name:"张三",age:20,sex:"男"},
                    {name:"李四",age:30,sex:"女"},
                    {name:"王五",age:40,sex:"男"}
                ],
                newStudent:{name:"",ade:0,sex:"男"}
            },
            methods:{
                creatNewstudent(){
                    if(this.newStudent.name===""){
                        alert("姓名不能为空");
                        return ;
                    }
                    if(this.newStudent.age<10){
                        alert("年龄不能小于10岁");
                        return ;
                    }
                    this.students.unshift(this.newStudent);
                    this.newStudent={name:"",age:0,sex:"男"}

                }
            }

        })

    </script>
</body>
</html>

在这里插入图片描述

实现删除学生信息功能

1.添加一个删除按钮
2.用index绑定当前属性
3.用splice 来删除

              <tr v-for="(student,index) in students" >
                  <td>{{student.name}}</td>
                  <td>{{student.age}}</td>
                  <td>{{student.sex}}</td>
                  <td><button @click="deletStudent(index)">删除</button></td>
              </tr>

 deletStudent(index){
   this.students.splice(index,1)
                }

在这里插入图片描述

加上CSS渲染

以及其它增删改查部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js" charset="UTF-8"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >
    <style type="text/css">
        [v-cloak]{
            display: none;
        }

        table{
            width:620px;
            border: 1px solid red;
            text-align: center;
        }
        thead{
            background-color:cornflowerblue;
        }
        #pop{
            position: absolute;
            left:40%;
            top: 200px;
            z-index: 1999;
            background:rgba(0,0,0,.3);
            width: 380px;
            height: 100px;
            padding: 20px;
        }
    </style>
</head>
<body>
      <div id="app" v-cloak>
          <label for="username">用户名:</label>
          <input type="text" id="username" placeholder="请输入用户名" v-model="newStudent.name"/>

          <label for="">年龄:</label>
          <input type="text" id="" placeholder="请输入年龄" v-model="newStudent.age"/>

          <label for="">性别:</label>
          <select id="" v-model="newStudent.sex">
              <option value="男">男</option>
              <option value="女">女</option>

          </select>
          <button @click="creatNewstudent">创建新用户</button>
          <table class="table table-bordered table-hover">
              <thead>
              <tr> <td>姓名</td> <td>年龄</td> <td>性别</td><td>操作</td></tr>
              </thead>
              <tbody>
              <tr v-for="(student,index) in students">
                  <td>{{student.name}}</td>
                  <td>{{student.age}}</td>
                  <td>{{student.sex}}</td>
                  <td><button @click="deletStudent(index)">删除</button>
                      <button @click="changeStudent(index)">修改</button>
                  </td>
              </tr>

              </tbody>
          </table>
          <div id="pop" v-show="popshow">
              姓名:<input type="text" v-model="changestudent"/>
              <button type="button" @click="changed">修改</button>
              <button type="button" @click="close">关闭</button>
          </div>
          <button @click="aver()">显示平均年龄</button>
          <button @click="sortage()">根据年龄升序排序</button>
          <input type="text" v-model="search"/>
          <button @click="find()">根据姓名搜索</button>
          <p> <input type='date' /></p>
      </div>
    <script type="text/javascript">
        var  vm= new Vue({
            el:"#app",
            data:{
                students:[
                    {name:"张三",age:20,sex:"男"},
                    {name:"李四",age:30,sex:"女"},
                    {name:"王五",age:40,sex:"男"}
                ],
                newStudent:{name:"",ade:0,sex:"男"},
                popshow:false,
                changestudent:'',
                search:""

            },
            methods:{
                creatNewstudent(){
                    if(this.newStudent.name===""){
                        alert("姓名不能为空");
                        return ;
                    }
                    if(this.newStudent.age<10){
                        alert("年龄不能小于10岁");
                        return ;
                    }
                    this.students.unshift(this.newStudent);
                    this.newStudent={name:"",age:0,sex:"男"}
                },
                deletStudent(index){
                    this.students.splice(index,1)
                },
                changeStudent(index){
                   this.popshow=true;
                   this.changestudent=this.students[index].name;
                   this.changeindex=index;
                },
                changed(){
                  this.students[this.changeindex].name=this.changestudent;
                  alert("修改成功");
                  this.popshow=false;
                },
                close(){
                  this.popshow=false;
                },
                aver(){
                    var sum=0;
                    for(var i=0;i<this.students.length;i++)
                    {
                        sum+=this.students[i].age;
                    }
                    alert("所有人的平均年龄为"+sum/this.students.length);
                },
                sortage(){
                  this.students.sort(function(a,b){
                      return a.age-b.age;
                  })
                },
                find(){
                    search=this.search;
                    vm.students=this.students.filter(function(item){
                        return item.name.match(search);
                    });

                }
            }

        })

    </script>
</body>
</html>

最终效果

在这里插入图片描述 **

ThXe

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
Vue 简易信息管理

基本信息框架实现步骤1.导入Vue源码<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js" charset="UTF-8"></script>2.将html与Vue绑定<div id="app" v-cloak></div>script type="text/javascript"> var vm= new Vue({ el:"#app", data:
复制链接

扫一扫