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>

     
  • 相关阅读:
    基因数据分析主流软件与基因预测方法步骤-搬运工
    调用约定__cdecl __fastcall与__stdcall
    const用法体会
    NS3系列——eclipse + NS3环境搭建
    小div在大div里面水平垂直都居中的实现方法
    template.js插件和ajax一起使用的例子
    js获取时间的函数集
    ajax获取json数据及实现跨域请求
    JavaScript里的Date 对象属性及对象方法--实现简单的日历
    css单行文本及多行文本溢出显示省略号
  • 原文地址:https://www.cnblogs.com/ZHANGKAIXUAN/p/6790124.html
Copyright © 2011-2022 走看看