Vue案例-CFANZ编程社区

效果图：
增加：
删除：
点击之后：
还有如果增加为空的话，弹出提示框。
初学Vue的时候可以拿这个小案例练练手哦，需要的代码看看
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        table{
            width: 500px;
            height: 300px;
            border: 1px solid gray;
        }
        table tr td{
            text-align: center;
        }
    </style>
     <script src="vue.js"></script> 
    <title>学生信息案例</title>
</head>
<body>
    <div id="app">
        <h2>学员信息表</h2>
        <p>姓名:<input type='text' v-model="name"></p>
        <p>年龄:<input type='text' v-model="age"></p>
        <p>性别:<input type='text' v-model="sex"></p>
        <p>学籍:<input type='text' v-model="sheng"></p>
        <button @click="add()">添加</button>
        <table>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>学籍</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,index) in stus" :key="index">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.sheng}}</td>
                <td><button @click="del(index)">删除</button></td><!--删除的时候传入一个实数-->
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                stus:[
                    {name:'张三',age:18,sex:'男',sheng:'北京'},
                    {name:'李四',age:28,sex:'男',sheng:'上海'},
                    {name:'王五',age:31,sex:'男',sheng:'广州'},
                    {name:'赵六',age:45,sex:'男',sheng:'深圳'},
                ],
                name:'',
                age:'',
                sex:'',
                sheng:'',
            },
            methods: {
                add(){

                    //增加时做一个不能为空的判断
                    if(this.name==''){alert('信息不能为空'); return false;}
                    if(this.age==''){alert('信息不能为空'); return false;}
                    if(this.sex==''){alert('信息不能为空'); return false;}
                    if(this.sheng==''){alert('信息不能为空'); return false;}
                    //拼接所有输入的信息成为stus数组的的对象格式
                    //不叫拼接不是在挎号里，在对象中不用拼接叫做'组装'
                    let newMsg={name:this.name,age:this.age,sex:this.sex,sheng:this.sheng}
                    this.stus.push(newMsg);

                },
                del(i){ //接收形参
                     let newMsg={name:this.name,age:this.age,sex:this.sex,sheng:this.sheng}
                    this.stus.splice(i,1) 
                     alert(i)
                   
                }
            },

        })
    </script>
</body>
</html>
<!-- 
    认识Vue用数据(data)来实现dom元素的变化的
 -->
注意vue.js自己引用一下， <script src="vue.js"></script>路径可以得改一下。