vue表单动态数据交互

Html

Css



    
        
            姓名：
            
                
            
        
        
            学号：
            
                
            
        
        
            是否住校：
            
                
            
        
        
            
                
                
            
        
    
    
        学员信息表
        
            
                
                    
                        序号
                        姓名
                        学号
                        是否住校
                        操作
                    
                
                
                    
                        暂无数据
                    
                    
                        {{i+1}}
                        {{v.name}}
                        {{v.number}}
                        {{v.check | stateFilter}}

序号	姓名	学号	是否住校	操作
暂无数据
{{i+1}}	{{v.name}}	{{v.number}}	{{v.check \| stateFilter}}

 * {
	margin:0 auto;
	padding:0;
}
.container {
	margin-top:20px;
}
input[type="text"] {
	width:1000px;
	padding:10px;
	border-radius:5px;
}
input[type="number"] {
	width:1000px;
	padding:10px;
	border-radius:5px;
}
.del {
	color:#fff;
	background:cornflowerblue;
}

window.onload = function() {
      new Vue({
          el: "#my",
          data: {
              obj: {
                  name: "",
                  number: "",
                  check: false,
              },
              lists: [],
              n: 0 //当前索引
          },
          methods: {
              add() { //添加
                  this.lists.push({
                      name: this.obj.name,
                      number: this.obj.number,
                      check: this.obj.check
                  })
                  this.reset()
              },
              reset() { //重置
                  this.obj = {}
              },
              del(i) { //弹层中的删除
                  this.lists.splice(this.n, 1)
              }
          },
          filters: { //过滤器
              stateFilter: function(type) { //type=lists.check
                  switch (type) {
                      case true:
                          return "住校";
                      case false:
                          return "不住校";
                      default:
                          return "不住校"

}
              }
          }

})
  }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

vue表单动态数据交互



代码描述：vue表单动态数据交互,表格数据添加删除。

更新时间：2019-11-10 13:13:43
1.姓名，学号和是否住校都选择后可以添加，要不是禁用按钮
2.重置是只有有姓名或学号其中一项，都可以禁用
3.删除按钮
4.是否住校按钮添加过滤器

1

最新

发表评论全部评论

暂时没有评论！

往哪走 .0

2019/11/20 16:50:26

你的 del() 方法有问题的回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

jiyahua

相关代码

vue表单动态数据交互

最新