vue实例（实现数据的增删改查（纯前端）） vue实例：实现数据的增删改查

.container{ padding: 10px; } .input-bar{ padding: 5px; background: #f1f1f1; margin-bottom: 10px; } input{ display: block; width: 100%; height: 30px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; /* border: 1px solid #ccc; */ border: 1px solid #e4eaec; /* border-radius: 4px; */ border-radius: 2px; /* -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); */ /* box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); */ -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .table, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { padding: 8px !important; margin-bottom: 0 !important; /* border-bottom: 1px solid #d4d8da; */ border-bottom: 1px solid #e4eaec; border-collapse: collapse !important; border-radius: 1px; } .table tbody { display: table-row-group; vertical-align: middle; border-color: inherit; } .table tr { display: table-row; vertical-align: inherit; border-color: inherit; } .table-bordered { border: 1px solid #e4eaec; } .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border: 1px solid #e4eaec; } .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border: 1px solid #e4eaec; } .modal{ width: 400px; height: 200px; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -200px; background: #ffffff; border: 1px solid #dddddd; border-radius: 5px; z-index: 100000; } .modal-header{ margin: 0; padding: 0; font-size: 14px; font-weight: normal; padding-left: 10px; padding-right: 10px; line-height: 40px; } .modal-header span{ float: right; cursor: pointer; } .modal-body{ padding: 10px; } .modal-footer{ text-align: right; padding: 10px; } button{ color: #fff; background-color: #36a9e1; border-color: #36a9e1; display: inline-block; padding: 4px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; /* border-radius: 4px; */ border-radius: 2px; }