『前端学习实例』商品页面的增删查（Bootstrap + Vue）

最新推荐文章于 2023-02-25 00:21:51 发布

大熊软糖M

最新推荐文章于 2023-02-25 00:21:51 发布

阅读量339

点赞数

分类专栏：前端学习实例文章标签： vue

本文链接：https://blog.csdn.net/GLZX_HM/article/details/107926036

版权

这篇博客通过实例展示了如何结合Bootstrap和Vue.js技术，实现商品页面的商品增删查功能。博主详细介绍了功能需求，包括商品页面的布局、添加、删除和查找操作，并提供了结果展示及完整的源代码目录。

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

官方文档： Bootstrap 中文文档 · Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。

官方文档：Vue.js

功能需求

实现商品页面 （基于Bootstrap的导航栏和表格）
实现具体功能 （基于Vue）

添加 （双向绑定，点击事件）
删除 （双向绑定，点击事件）
查找 （双向绑定）

结果展示

初始化
添加(id = 10)
删除(id = 2)
搜索(关键字a)
搜索(删除关键字)

源代码

文件目录

css文件夹

bootstrap.css

js文件夹

vue.js

index.html 网页源文件

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>

<body>


<link href="css/bootstrap.css" type="text/css" rel="stylesheet"> <!--引入Bootstrap的css样式-->
<style>
  .myintrotext{
    /*定义文字*/
    color: #cccccc;
    font-size: large;
  }
</style>


<div class="container myapp">

  <!--导航条-->
  <nav class="navbar navbar-inverse">
    <div class="navbar-form navbar-left myintrotext"> <!--debug：使用form表单时，按钮button会自动提交并刷新界面-->

      Id:<input type="text" class="form-control" placeholder="Your Item Id" v-model="newitem.id"> <!--双绑-->

      Name:<input type="text" class="form-control" placeholder="Your Item Name" v-model="newitem.name"> <!