Vue中搭配Bootstrap实现Vue的列表增删功能
在日常开发中，我们可以用 “拿来主义” 借助Bootstarp现成的一些样式，快速生成我们想要的页面布局，避免书写大量的HTML和CSS代码，省下了许多不必要的时间。
当我们想要生成表单表格时我们可以查看Bootstrap的官方文档，来选择我们想要的样式，并根据自己的一些实际情况或者个人喜好进行一定的修改。了解Bootstrap
为了直接搭配Vue使用，我们把表单代码直接复制到 root 容器里面。
<div id="root">
<!-- 卡片区域 -->
<div class="card">
<div class="card-header">添加水果</div>
<div class="card-body">
<!-- 添加品牌的表单区域 -->
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">水果名称</div>
</div>
<input type="text" class="form-control" placeholder="请输入水果名字">
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">添加</button>
</div>
</div>
</form>
</div>
</div>
</div>
这边借助一下Bootstrap中的card(卡片)进行布局，扩充一下宽度。
接下来我们在借助Bootstrap生成一个表格部分：
<table class="table table-border table-hover table-striped">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">水果名称</th>
<th scope="col">状态</th>
<th scope="col">添加时间</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>苹果</td>
<td>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">已禁用</label>
</div>
</td>
<td>时间</td>
<td>
<a href="javascript:'" rel="external nofollow" rel="external nofollow" >删除</a>
</td>
</tr>
</tbody>
</table>
表格结构写完之后，接下里我们就要使用Vue对表格进行填充数据了。
<script src="/Vue.js/vue.js"></script>
<script>
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
const vm = new Vue({
data: {
list: [
{ id: 1, name: '苹果', status: true, time: new Date() },
{ id: 2, name: '香蕉', status: true, time: new Date() },
{ id: 3, name: '葡萄', status: false, time: new Date() },
{ id: 4, name: '桃子', status: true, time: new Date() },
]
}
})
vm.$mount('#root')
</script>
接下里给删除操作绑定点击事件，如下：
给a链接绑定一个删除的点击事件。
我们使用filter进行过滤掉删除的数组，当前循环项的item.id不等于我们要删的id，就返回。
接下来我们实现水果的添加功能。
给输入框设置双向绑定事件，给表单设置提交事件并添加阻止事件。
定义用户输入的水果名称以及下一个可用的ID ：
给绑定的add事件添加判断行为：
现在基本的添加删除功能已经完成，请看效果：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/Bootstrap/bootstrap.css" rel="external nofollow" >
<style>
body {
padding: 15px;
}
</style>
</head>
<body>
<div id="root">
<!-- 卡片区域 -->
<div class="card">
<div class="card-header">添加水果</div>
<div class="card-body">
<!-- 添加品牌的表单区域 -->
<form @submit.prevent="add">
<div class="form-row align-items-center">
<div class="col-auto">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">水果名称</div>
</div>
<input type="text" class="form-control" placeholder="请输入水果名字" v-model.trim="brand">
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">添加</button>
</div>
</div>
</form>
</div>
</div>
<!-- 表格区域 -->
<table class="table table-border table-hover table-striped">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">水果名称</th>
<th scope="col">状态</th>
<th scope="col">添加时间</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" :id="'customSwitch'+item.id"
v-model="item.status">
<label class="custom-control-label" :for="'customSwitch'+item.id"
v-if="item.status">已启用</label>
<label class="custom-control-label" :for="'customSwitch'+item.id" v-else>已禁用</label>
</div>
</td>
<td>{{item.time}}</td>
<td>
<a href="javascript:'" rel="external nofollow" rel="external nofollow" @click="remove(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="/Vue.js/vue.js"></script>
<script>
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
const vm = new Vue({
data: {
// 用户输入的水果名称
brand: '',
// nextID是下一个可用的 ID
nextId: 5,
list: [
{ id: 1, name: '苹果', status: true, time: new Date() },
{ id: 2, name: '香蕉', status: true, time: new Date() },
{ id: 3, name: '葡萄', status: false, time: new Date() },
{ id: 4, name: '桃子', status: true, time: new Date() },
]
},
methods: {
// 点击链接删除对应的水果
remove (id) {
this.list = this.list.filter(item => item.id !== id)
},
// 阻止表单的默认提交行为
// 如果判断到brand的值为空字符串，则return出去
add () {
if (this.brand === '') return alert('必须输入水果')
// 如果没有被return出去，应该执行添加逻辑
// 1.先把要添加的水果对象整理出来
const obj = {
id: this.nextId,
name:this.brand,
status:true,
time:new Date()
}
// 2.往this.list数组中push步骤一中得到的对象
this.list.push(obj)
// 3.清空this.brand让this.nextID自增+1
// this.brand=''
this.nextId++
},
}
})
vm.$mount('#root')
</script>
</body>
</html>
到此这篇关于Vue中搭配Bootstrap实现Vue的列表增删功能的文章就介绍到这了,更多相关vue bootstrap列表增删内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
vue2.0与bootstrap3实现列表分页效果
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 直接引入vue的js文件进行页面渲染分页,不是vuex的哦,以下源码可以直接运行哟^_^ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用vue2.0与bootstrap3进行简单列表分页</title> <link href="http:
-
SpringBoot+Vue+Axios+BootStrap实现图书的增删改查功能示例
目录 一.开发工具 二.项目结构 三.编写项目 四.运行项目 由于是初学Vue.Axios,可能在界面和功能上存在着一些问题,但这些并不妨碍使用.如果有对编程感兴趣的朋友,可以试着做一做.这个由于是第一次做,不太熟练.在后续的过程中会不断的完善. 一.开发工具 IntelliJ IDEA Ultimate 2021.1 apache-maven-3.5.4 MySQL5.7 JDK 1.8.0_281 二.项目结构 三.编写项目 1.创建数据库 SET NAMES utf8mb4; SET FO
-
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
最近在搞毕业设计想趁机学学前端知识,于是就应用了目前比较流行的vue框架来进行数据显示,使用BootStrap进行简单的样式编写 1.第一步肯定是包的导入了 目前对node.js还不是很了解,所以包都是手动下载导入的,没有用到那个nmp vue.min.js是vue的主包,vue-resource.js是开源的vue Ajax包,对ajax进行了封装 bootstrap既就是样式的相关css和js了 <script type="text/javascript" src="
-
Vue中搭配Bootstrap实现Vue的列表增删功能
在日常开发中,我们可以用 “拿来主义” 借助Bootstarp现成的一些样式,快速生成我们想要的页面布局,避免书写大量的HTML和CSS代码,省下了许多不必要的时间. 当我们想要生成表单表格时我们可以查看Bootstrap的官方文档,来选择我们想要的样式,并根据自己的一些实际情况或者个人喜好进行一定的修改.了解Bootstrap 为了直接搭配Vue使用,我们把表单代码直接复制到 root 容器里面. <div id="root"> <!-- 卡片区域 --> &
-
vue中el-autocomplete支持分页上拉加载功能
目录 el-autocomplete使用 template 实现需求分析 1. 输入框为空时聚焦或失焦后又重新聚焦不会触发请求数据接口 2. 缓存上一次已查询的数据&搜索条件:blurArr.blurTxt 3.滚动加载指令(监听容器的scroll事件并进行防抖处理) 4. 分页加载 4.0 获取数据,并进行格式化 4.1 关闭加载圈 4.2 分页加载事件 4.3 清空输入框,重置上次记录的数据 4.4 选中时记录相关数据 数据展示不稳定问题 完整的 scss 文件 完整的 js 文件 总结 e
-
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决
-
Vue中使用vue-i18插件实现多语言切换功能
在基于vue-cli项目开发过程中,多语言切换功能可使用vue-i18插件,具体实现方法如下: step1: 在项目中安装vue-i18插件 cnpm install vue-i18n --save-dev step2:在项目的入口文件main.js中引入vue-i18n插件 import Vue from 'vue' import router from './router' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n
-
vue中v-for指令完成列表渲染
目录 1.列表遍历 2.Vue中key的作用 3.列表过滤 本文就Vue中列表渲染做个简单总结和使用演示: 列表渲染是用v-for指令根据绑定一组元素的选项来完成的,渲染格式可以自定义. 1.列表遍历 最基本的使用案例1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa
-
基于vue中css预加载使用sass的配置方式详解
1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"
-
checkbox在vue中的用法小结
前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue中用到过的checkbox也只是别人写好的组件,这次在自己实现时走了很多坑,特意写这篇文章记录下来,给后来者提供一个参考 在这之前,先看看原生checkbox搭配jquery取值的用法 <input type="checkbox" name="hobby" v
-
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
通过前面对Vue的学习,到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法.首先要了解的是$refs属性.但是在深入到JavaScript部分之前,我们先看看模板. <div id="app"> <h1>{{ message }}</h1> <button @click="clickedButton">点击偶</button> </div> let app = new Vue({ e
-
Vue中利用better-scroll组件实现横向滚动功能
About 最近在学习vue的过程中,仿照去哪儿网的移动端写了个小项目,旨在实践和巩固基础知识,但是今天发现去哪儿的首页上有一个组件用户体验较差,即一个横向列表使用浏览器的原生滚动实现,列表滚动起来较为生涩,很难受,于是乎决定由better-scroll重写这个组件. better-scroll介绍 better-scroll是黄轶大神(没错,我学长)写的基于i-scroll的一个滚动组件,项目地址:https://github.com/ustbhuangyi/better-scroll 一.滚
-
全面解析vue中的数据双向绑定
1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter.这也正是Vue不兼容IE8以下的原因. 2.Object.defineProerty(); var obj = {}; Object.defineProperty(obj,"hello",{ enumerable: true, //表示这个属性能够通过 for -- in 循环 (是否可枚举); configurable