vue3_demo

  1 <template>
  2     <div id="app">
  3         <!--第一部分-->
  4         <fieldset>
  5             <legend>指令综合小练习</legend>
  6             <div>
  7                 <span>姓名: </span>
  8                 <input type="text" placeholder="请输入姓名" v-model="newPerson.name">
  9             </div>
 10             <div>
 11                 <span>年龄: </span>
 12                 <input type="text" placeholder="请输入年龄" v-model="newPerson.age">
 13             </div>
 14             <div>
 15                 <span>性别: </span>
 16                 <select  v-model="newPerson.sex">
 17                     <option value="男">男</option>
 18                     <option value="女">女</option>
 19                 </select>
 20             </div>
 21             <div>
 22                 <span>手机: </span>
 23                 <input type="text" placeholder="请输入手机号码"  v-model="newPerson.phone">
 24             </div>
 25             <button @click="createNewPerson">创建新用户</button>
 26         </fieldset>
 27         <!--第二部分-->
 28         <table>
 29             <thead>
 30             <tr>
 31                 <td>姓名</td>
 32                 <td>性别</td>
 33                 <td>年龄</td>
 34                 <td>手机</td>
 35                 <td>删除</td>
 36             </tr>
 37             </thead>
 38             <tbody>
 39                <tr v-for="(p, index) in persons">
 40                    <td v-text="p.name"></td>
 41                    <td v-text="p.age"></td>
 42                    <td v-text="p.sex"></td>
 43                    <td v-text="p.phone"></td>
 44                    <td>
 45                        <button @click="delPerson(index)">删除</button>
 46                    </td>
 47                </tr>
 48             </tbody>
 49         </table>
 50     </div>
 51 </template>
 52 
 53 <script>
 54     export default {
 55         name: "Demo",
 56         data(){
 57            return {
 58                persons: [
 59                    {name: '张三', age: 20, sex: '男', phone: '18919988999'},
 60                    {name: '李四', age: 30, sex: '女', phone: '18912121212'},
 61                    {name: '王五', age: 40, sex: '男', phone: '18912222229'},
 62                    {name: '赵六', age: 10, sex: '女', phone: '18921218999'}
 63                ],
 64                newPerson: {name: '', age: 0, sex: '男', phone: ''}
 65            }
 66         },
 67         methods: {
 68             // 1. 添加
 69             createNewPerson(){
 70                 // 1. 验证
 71                 let {name, age, sex, phone} = this.newPerson;
 72                 if(name === ''){
 73                     alert('姓名不能为空！');
 74                     return;
 75                 }
 76                 if(age <= 0){
 77                     alert('年龄不正确！');
 78                     return;
 79                 }
 80                 if(phone === ''){
 81                     alert('手机号码不正确！');
 82                     return;
 83                 }
 84 
 85                 // 2. 插入数据
 86                 this.persons.unshift(this.newPerson);
 87 
 88                 // 3. 清空数据
 89                 this.newPerson =  {name: '', age: 0, sex: '男', phone: ''};
 90 
 91             },
 92             // 2. 删除
 93             delPerson(index){
 94                 this.persons.splice(index, 1);
 95             }
 96         }
 97     }
 98 </script>
 99 
100 <style scoped>
101     #app{margin: 50px auto;width: 600px;}
102     fieldset{border: 1px solid orangered;margin-bottom: 20px;}
103     fieldset input{width: 200px;height: 30px;margin: 10px 0;}
104     table{width: 600px;border: 2px solid orangered;text-align: center;}
105     thead{background-color: orangered;}
106 </style>