Vue学习——品牌列表案例（15）

最新推荐文章于 2023-07-14 17:54:17 发布
最新推荐文章于 2023-07-14 17:54:17 发布
阅读量574 收藏 3
点赞数
分类专栏： Vue 文章标签： vue.js 学习 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52480906/article/details/124764805
版权

案例效果

在这里插入图片描述
通过新增按钮，就可以添加品牌到下列
当然，为了更快地掌握vue，列表的模型是现成的，我们只需要编写其背后
的功能

编写

①列表数据的渲染

在这里插入图片描述
然后编写表格，并在vue中循环渲染tr行
在这里插入图片描述

在这里插入图片描述
这就是结果
在这里插入图片描述
然后我们来用Bootstrap美化一下
给大table加一个class：class="table table-bordered table-hover table-striped
在这里插入图片描述
然后是对status进行双向绑定：即浏览器页面操作即可更改数据：很简单，v-model就可以直接完成
在这里插入图片描述

在这里插入图片描述

如果单单一个开关不行，还需要显示“已启用已禁用”呢？这里我们就需要用v-if来显示/隐藏了

在这里插入图片描述
在这里插入图片描述

然后美化一下
在这里插入图片描述
在这里，我们知道，label标签的for属性是鼠标点击相应物体，然后触发，因此我们给input添加一个id，然后在label里面用for触发他，这样，我们点击“已启用，已禁用”也照样可以触发状态了

在这里插入图片描述

v-model里面会自动判断绑定的元素类型，因此会自动控制此元素对应的属性，因此只要写入type之后，vue就会自动寻找到属性

在这里插入图片描述

②删除功能的实现

在上面我们已经写了删除这个按钮
因此我们需要绑定一个事件，把id放进去，在列表数组内找到那一项删除即可
在这里插入图片描述

filter将此项过滤掉
在这里插入图片描述

然后我们加个弹窗确认，更人性化一些
在这里插入图片描述
在这里插入图片描述

③添加品牌功能实现

在这里插入图片描述
在这里插入图片描述

然后是添加内部方法
先在data里面注册一个brand
然后去methods里面写一个add方法，并绑定到上面的输入框和按钮中
（form有submit事件，会自动刷新网页，加一个@和prevent就OK了）
在这里插入图片描述
在这里插入图片描述

这样，我们就可以发现提交的表单起作用了

在这里插入图片描述
然后优化一下：解决ID不存在的问题，并使得按了按钮就自动清空输入框

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
最后美化一下
在这里插入图片描述
就变成这样了
在这里插入图片描述

Calendo
关注
专栏目录
Vue篇——购物车案例
J-April的博客
02-07 4457
利用Vue实现购物车的简单运用 借助layui框架实现组件（如table）的快速搭建 通过Vue实现从后端获取数据到前端的展示 实现移除书籍功能（添加和修改书籍信息功能暂未实现） 实现书籍购买数量的增加或减少，并且能够实现总价格的动态变化 … 程序效果截图 实现代码 首先导入layui的关键代码，笔者将其放在本项目的同级目录下（layui关键代码可在官方处下载，这里不再赘述） 创建html、css和JavaScript目录 html <!DOCTYPE html> <html
Vue小案例——图书列表
weixin_42985170的博客
05-01 1358
图书列表HTML 结构CSS 样式提供的静态数据把提供好的数据渲染到页面上对页面进行事件绑定逻辑层次的JS代码
vue基础-品牌列表案例.zip
12-28
vue基础-品牌列表案例 vue的增删
品牌列表案例(vue)
Rziziの博客
08-29 761
vue 小案例 品牌列表案例 bootstrap渲染 <div id="app"> <!-- 卡片区域 --> <div class="card"> <div class="card-header"> 添加品牌 </div> <div class="card-body">
vue品牌列表案例
qq_45645345的博客
04-21 830
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Document</title> <!-- 导入 bootstrap 的样式表 --> .
11、品牌列表案例
s12345672的博客
10-25 651
<!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>品牌列表案例<
vue中品牌列表案例
保持饥渴、好奇
08-08 1009
效果图 用到的知识点 双向数据绑定：v-model 全局的过滤器，进行时间的格式化 实例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--//导入js包--&g...
Vue购物车——组件化.rar
05-01
Vue.js 是一款流行的前端JavaScript框架，它以组件化为核心，使得构建复杂的Web应用变得更为简单。在"Vue购物车——组件化...通过学习和实践这个案例，开发者能够更深入地理解Vue.js的工作原理，并能运用到实际项目中。
Vue指令综合案例——汽车品牌管理（项目实战）
09-07
包含博主博客【前端知识】【vue学习】中的汽车品牌管理实战项目，实现了1.添加汽车品牌 2.删除汽车品牌 3.搜索品牌,list列表实时变化 html代码如下: 添加品牌id:Name:添加搜索名称关键字:id品牌名称添加时间操作；...
【Vue2】Vue功能实例——基于尚硅谷教程ToDoList案例（一）
02-09
【Vue2】Vue功能实例——基于尚硅谷教程ToDoList案例（一）
品牌列表案例源代码(完成之后的代码)
03-19
Vue基础实现案例
一起从零开始学VUE（2）——品牌列表案例
qq_46258819的博客
01-15 1918
VUE小案例——品牌列表案例 利用v-for实现列表的渲染 利用全局过滤器格式化时间 利用v-if来动态渲染数据
vue练习之品牌列表案例
qq_34448522的博客
12-11 954
今天做了一个品牌列表案例，一个动图展示今天的学习成果： 这次页面用了bootstrap框架 上代码： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &am
【Vue】基于Vue实现品牌列表案例
金鳞踏雨
03-26 386
使用bootstrap4.x相关的技术，例如：卡片、表单、按钮、表格。Vue指令与过滤器相关的知识点。1. 创建基本的 vue 实例 2. 基于 vue 渲染表格数据 3. 实现添加品牌的功能 4. 实现删除品牌的功能 5. 实现修改品牌状态的功能
Vue----品牌列表案例
emmmm.....
03-11 775
效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 最新版本的 Bootstrap 核心 CSS 文
vue2.0——第二天（vue指令、过滤器——＞品牌列表案例）
weixin_48137421的博客
06-21 1066
① 能够知道 vue 的基本使用步骤 ⚫ 导入 vue.js 文件 ⚫ new Vue() 构造函数，得到 vm 实例对象 ⚫ 声明 el 和 data 数据节点 ⚫ MVVM 的对应关系 ② 掌握 vue 中常见指令的基本用法 ⚫ 插值表达式、v-bind、v-on、v-if 和 v-else ⚫ v-for 和 :key、v-model ③ 掌握 vue 中过滤器的基本用法 ⚫ 全局过滤器 Vue.filter('过滤器名称', function) ⚫ 私有过滤器 filters 节点...
Vue-品牌列表案例
最新发布
a_xia_o的博客
07-14 706
卡片（Card）、表单相关(Forms)、按钮(Buttons)、表格(Tables)插值表达式、属性绑定、事件绑定、双向数据绑定、修饰符、条件渲染、列表渲染、全局过滤器。属性（用来记录下一个可用的id值），并在。注意：需要在data数据中声明。vue指令与过滤器相关的知识点。：监听input输入框的。①创建基本的vue实例。：导入vue的js文件。
【vue】品牌列表案例（1.1实训）
qq_45746744的博客
01-01 666
基于 vue 渲染表格数据 步骤1：使用 v-for 指令循环渲染表格的数据 <tr v-for="brand in brandlist" :key="brand.id"> <td>{{brand.id}}</td> <td>{{brand.brandname}}</td> <td>{{brand.state}}</td> <td>{{brand.addtime}}</td> <td&
Vue实现品牌列表案例
qweryitao的博客
11-11 635
Vue实现品牌列表案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>品牌列表案例</title> <script src="https://cdn.staticfile.org/vue/2.6.10/v...
vue-router应用——用户登录注册案例
05-24
import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 接下来，我们新建一个router.js文件，用于配置路由。在该文件中，我们需要定义路由路径和路由组件： ``` import Vue from 'vue' import VueRouter ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值