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

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

原创最新推荐文章于 2023-02-25 00:21:51 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端学习实例专栏收录该内容

7 篇文章

订阅专栏

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

官方文档： 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"> <!--双绑-->

      <button class="btn btn-info" @click="Add">Add Item</button> <!--绑点击事件：添加-->

    </div>
    <div class="navbar-form navbar-right">

      <input type="text" class="form-control" placeholder="Search Your Item Name" v-model="searchkeyword">  <!--双绑-->

    </div>
  </nav>

  <!--表格-->
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Time</th>
        <th>Operation</th>
      </tr>
    </thead>
    <tbody> <!--自动监听：v-for中的数据有变化时，会自动监听变化并重新渲染数据-->
      <tr v-for="item in list" v-show="Search(item)"> <!--行:每个对象-->
        <td v-for="val in item"> <!--行：对象中的每个属性-->
          <div v-text="val"></div>
        </td>
        <td>
          <a @click.prevent="Remove(item.id)">删除</a> <!--绑点击事件：删除 同时阻止默认跳转-->
        </td>
      </tr>
    </tbody>
  </table>

</div>


<script src="js/vue.js"></script>
<script>
	var vm = new Vue({
		el:'.myapp',
		data:{
      list: [ //已有商品
        {id: 1, name: 'abcdef', ctime:new Date(2020,7,11,1,0,1,0)},
        {id: 2, name: 'defghi', ctime:new Date(2020,7,11,1,0,2,0)},
        {id: 3, name: 'ghijkl', ctime:new Date(2020,7,11,1,0,3,0)},
        {id: 4, name: 'jklmno', ctime:new Date(2020,7,11,1,0,4,0)},
        {id: 5, name: 'mnopqr', ctime:new Date(2020,7,11,1,0,5,0)},
        {id: 6, name: 'pqrstu', ctime:new Date(2020,7,11,1,0,6,0)},
        {id: 7, name: 'stuvwx', ctime:new Date(2020,7,11,1,0,7,0)},
        {id: 8, name: 'vwxyza', ctime:new Date(2020,7,11,1,0,8,0)},
        {id: 9, name: 'yzaabc', ctime:new Date(2020,7,11,1,0,9,0)}
      ],
      newitem: { //添加新项目的值
        id: null, name: null
      },
      searchkeyword: null //搜索时的关键字
		},
    methods:{
      Add(){ //添加 - 按钮点击事件
        let newobj = { //创建新对象
          id: this.newitem.id, //获取双向绑定副本
          name: this.newitem.name, //获取双向绑定副本
          ctime: new Date()
        };
        if(newobj.id == "" || newobj.id == null || newobj.id == undefined) { //debug：输入空Id
          alert("id不可为空！");
          return;
        }
        else if(this.list.findIndex(value => value.id == newobj.id) >= 0){ //debug：输入重复Id，会导致删除异常
          alert("id不能和已有商品重复！");
          return;
        }
        else
          this.list.push(newobj); //添加
      },
      Remove(id){ //删除 - 按钮点击事件
        let deleteobjindex = this.list.findIndex(value => value.id == id); //使用findIndex()查找索引，参数是回调函数(参数值、索引等，返回值布尔)
        this.list.splice(deleteobjindex, 1); //使用splice()删除元素，参数1索引号，2删除的数目，3替换元素
      },
      Search(item){ //搜索 ：根据搜索内容双绑，直接更改v-for中v-show的布尔值 //其他方法：渲染filter()迭代后的数组
        return item.name.includes(this.searchkeyword) || this.searchkeyword == null; //返回true：为null时，模式匹配成功时
      }
    }
	});
</script>


</body>

</html>