Asp.net MVC+Vue.js

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <style type="text/css">
      .bg{
        background:red;
      }
    </style>
  </head>
  <body>
    <div id="demo">
      <label>姓名</label> <input type="text" id="name" v-model="name"/>
      <label>性别</label> <input type="text" id="gender" v-model="gender"/>
      <label>年龄</label> <input type="text" id="age" v-model="age"/>
      <label>爱好</label> <input type="text" id="hobby" v-model="hobby"/>
      <button v-on:click="AddStuList">添加</button>
      <table border="1" cellspacing="5" cellpadding="5" v-show="stuList.length">
        <caption><h3>学生列表</h3></caption>
        <tr>
          <th>状态</th>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>爱好</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in stuList" :class="{bg:item.isChecked}">
          <td><input type="checkbox" name="" id="" value="" v-model="item.isChecked"/></td>
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.gender}}</td>
          <td>{{item.age}}</td>
          <td>{{item.hobby}}</td>
          <td><button v-on:click="delStuList(item)">删除</button></td>
        </tr>
      </table>
    </div>
    <script>
    var list=[
      {
        name:"张三",
        gender:"男",
        age:"12",
        hobby:"睡觉",
        isChecked:false
      },
      {
        name:"张三",
        gender:"男",
        age:"12",
        hobby:"睡觉",
        isChecked:false
      }
     ];

    var vm=new Vue({
        el:"#demo",
        data:{
          stuList:list,
          name:"",
          gender:"",
          age:"",
          hobby:"",
          isChecked:""
        },
        methods:{
          AddStuList:function(){
            var stu={
                name:this.name,
                gender:this.gender,
                age:this.age,
                hobby:this.hobby,
                isChecked:this.isChecked
              }
            this.stuList.push(stu);
            this.name='';
            this.gender='';
            this.age='';
            this.hobby='';
            isChecked='';
          },
         delStuList:function(item){
            var index=this.stuList.indexOf(item);
            this.stuList.splice(index)
          }
        }
      });
    </script>
</body>

</html>

运行结果如图:

这里写图片描述

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值