vue指令小结
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> div{ margin: 100px auto; width: 650px; } table{ width: 600px; border: 2px solid orange; text-align: center; } thead{ background-color: #FF0000; } .trs{ background-color: blue; } </style> <body> <p id = "trt" style="width: 100; height: 80px; background-color: red;"></p> <div id="pro"> name:<input type="text" v-model="user.name"/><br /> age:<input type="text" v-model="user.age"/><br /> sex:<input type="text" v-model="user.sex"/><br /> <button @click="add()">添加</button> <br /> <table> <thead> <td>序号</td> <td>姓名</td> <td>年龄</td> <td>性别</td> <td>操作</td> </thead> <tbody v-for="(user,index) in users"> <tr class='clazz' @mouseover="changeStyle()"> <td>{{index+1}}</td>//打1开头，而不是0 <td>{{user.name}}</td> <td>{{user.age}}</td> <td>{{user.sex}}</td> <td><button v-on:click="del(index)">删除</button></td> </tr> </tbody> </table> </div> <script src="js/jquery-3.4.1.js"></script> <script src="js/vue.js"></script> <script> class User{ constructor(name , age ,sex){ this.name = name ; this.age = age ; this.sex = sex ; } } let users = []; users.push(new User('zs',15,'man')); users.push(new User('ls',35,'man')); users.push(new User('ww',24,'man'));
new Vue({ el:"#pro", data:{ users:users, user:{name:'',age:'',sex:''}, trs:'trs' }, methods:{ del(index){ users.splice(index,1); }, add(){ if(this.user.name === ''){ alert("输入姓名有误"); return ; } if(this.user.age === ''){ alert("输入年龄有误"); return ; } if(this.user.sex === ''){ alert("输入性别有误"); return ; } /*users.push(new User(this.name,this.age,this.sex)); this.name=''; this.age=''; this.sex='';*/ users.unshift(this.user); this.user = {name:'',age:'',sex:''}; }, changeStyle(){ $(this).attr("class",'trs'); } } }); </script> </body> </html> |
