zoukankan      html  css  js  c++  java
  • 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>

     
  • 相关阅读:
    详解REMOTE_ADDR,HTTP_CLIENT_IP,HTTP_X_FORWARDED_FOR
    HTTP Header 详解
    搜索引擎爬虫蜘蛛的useragent
    PHP防抓取数据curl 解决方法
    用curl抓取网站数据,仿造IP、防屏蔽终极强悍解决方式
    windows下 composer常见问题及处理
    Composer命令详解
    SSM框架之RestFul示例
    关于SpringMVC返回数据带斜杠字符串问题之解决方案
    js之radio应用实例
  • 原文地址:https://www.cnblogs.com/ZHANGKAIXUAN/p/6790124.html
Copyright © 2011-2022 走看看