Vue初级项目 -- 静态录单系统

最新推荐文章于 2023-12-01 11:24:04 发布

小韩Boy

最新推荐文章于 2023-12-01 11:24:04 发布

阅读量479

点赞数

分类专栏：前端文章标签： Vue Vue简单项目初级项目

本文链接：https://blog.csdn.net/weixin_41967595/article/details/92660518

版权

本文介绍了一个使用Vue实现的初级录单系统，主要包括添加订单和删除订单的功能。作者强调通过实践来巩固Vue的学习，提供了源代码供读者复制粘贴以查看效果。

摘要由CSDN通过智能技术生成

录单系统

如下效果图主要功能：添加订单，删除订单，分页主要是由后台分页再传数据过来所以也就没写了

刚刚学的VUE,不上手写点东西的话，那怎么能记得牢固呢

源代码

复制粘贴即可看到效果

<!DOCTYPE html>
<html>
<head>
    <title>
        录单系统
    </title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
</head>
<style>
    #header{
        margin:0 auto;
        width: 1200px;
        height:50px;
        background-color: #333;
        color:#fff;
        font-size: 20px;
        line-height: 50px;
        text-indent:50px;
    }
    .clearfix{
        content:"";
        display: block;
        clear: both;
    }
    #content{
        margin:0 auto;
        width: 1200px;
        border: 1px solid #ccc;
    }
</style>
<body>
<div id="app">
    <div style="background-color: #333">
        <div id="header">
            {
  { title }} 
        </div>
    </div>
    <div id="content">
        <div style="margin:20px 20px 0;" class="clearfix">
            <div style="float: left;">
                <div class="btn btn-success" style="display: inline-block;vertical-align: middle;" @click="or">添加订单</div>
            </div>
            <div style="float: right;">
                <div class="form-inline" role="form" style="display: inline-block;vertical-align: middle;">