正文

vue,品牌列表案例（仅添加）(代码片段)

wo1ow1ow1  wo1ow1ow1  2022-12-19  184

关键词：

品牌列表案例（仅添加）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script src="../js/vue.js"></script>
 7         <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
 8     </head>
 9     <body>
10         <div id="app">
11             
12             
13             <div class="panel panel-primary">
14                 <div class="panel-heading">
15                     <h3 class="panel-title">添加品牌</h3>
16                 </div>
17                 <!-- form-inline 填在父元素里， 里面的子元素 占一行 -->
18                 <div class="panel-body form-inline">
19                     <label>
20                         Id:
21                         <input type="text" class="form-control" v-model="id">
22                     </label>
23                     
24                     <label>
25                         Name:
26                         <input type="text" class="form-control" v-model="name">
27                     </label>
28                 
29                     <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了
30                       不加（）也可以， 只不过不能传参-->
31                     <input type="button" class="btn btn-primary" value="添加" @click="add()"/>
32                 </div>
33             </div>
34             
35             
36             <table class="table table-bordered table-hover table-striped">
37                 <thead>
38                     <tr>
39                         <th>Id</th>
40                         <th>Name</th>
41                         <th>Ctime</th>
42                         <th>Operation</th>
43                     </tr>
44                 </thead>
45                 <tbody>
46                     <tr v-for="item in list" :key="item.id">
47                         <td> item.id </td>
48                         <td> item.name </td>
49                         <td> item.ctime </td>
50                         <td>
51                             <a href="#">删除</a>
52                         </td>
53                     </tr>
54                 </tbody>
55             </table>
56         </div>
57     </body>
58 </html>
59 <script>
60     var vm = new Vue(
61         el: ‘#app‘,
62         data:
63             id:‘‘,
64             name:‘‘,
65             list:[
66                  id: 1, name: ‘奔驰‘, ctime: new Date() ,
67                  id: 2, name: ‘宝马‘, ctime: new Date() ,
68                  id: 3, name: ‘五菱宏光‘, ctime: new Date() 
69             ]
70         ,
71         methods:
72             add()
73                 // console.log("5555")
74                 //分析:
75                 //1. 获取到 id 和 name , 直接从data 上面获取
76                 //2. 组织出一个对象
77                 //3. 把这个对象, 调用 数组的 相关方法, 添加到data 的 list 中
78                 //4. 注意: 在Vue中, 已经实现了数据的双向绑定, 每当我们修改了 data 中的数据, Vue
79                 // 默认监听 数据的改动, 自动把最新的数据, 应用到页面上;
80                 
81                 // 5. 当我们意识到上面的第四步的时候,就证明大家已经入门Vue了, 我们更多的是在进行 VM中
82                 // Model 数据的操作, 同时, 在操作 Model数据的时候, 指定的业务逻辑操作
83             
84                 var car =  id: this.id, name: this.name, ctime: new Date() 
85                 this.list.push(car)
86                 
87                 // 将输入框清空, 否则输入的内容还在
88                 // this.id = this.name = ‘‘
89             
90         
91     )
92 </script>

发现前端还是用VScode做方便，自带好多插件，以后有时间往VScode转一转，不过小程序还是得用uni-app

2019-06-12 23:45:17

vue,品牌列表案例（仅添加,删除，搜索，全局过滤器，私有过滤器，日期填充）(代码片段)

Vue,品牌列表案例（仅添加,删除，搜索，全局过滤器，私有过滤器，日期填充） String.prototype.padStart(maxlength,fillString=‘‘)填充字符串 maxlength是填充完总长度多少 fillString=‘‘表示用什么填充 ... 查看详情

第二章vue快速入门--20品牌案例-完成品牌列表的添加功能+21品牌案例-根据id完成品牌的删除(代码片段)

1<!DOCTYPEhtml>2<htmllang="en">34<head>5<metacharset="utf-8">6<metaname="viewport"content="width=device-width,initial-scale=1.0">7<title>Document</title> 查看详情

01.品牌列表案例(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie 查看详情

02.品牌列表案例2(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie 查看详情

vue使用elementui案例（商品列表）(代码片段)

Goods.vue<template><divid="goods"><el-buttontype="text"@click="dialogVisible=true">添加商品</el-button><el-dialogtitle="添加商品":visible.sync="dialogVisible"width="30%":before-clos 查看详情

jquery选择器案例(代码片段)

一、预期效果实现一个效果，如下。品牌列表默认精简显示，单击“显示全部品牌”按钮显示全部品牌，同时列表将推荐的品牌的名字高亮显示，按钮里的文字变成“精简显示品牌”。再次点击“精简显示品牌... 查看详情

vue-resource改造品牌列表案例

...ary"><divclass="panel-heading"><h3class="panel-title">添加品牌</h3></div><divclass="panel 查看详情

第二章vue快速入门--23品牌案例-根据关键字实现数组的过滤(代码片段)

1<!DOCTYPEhtml>2<htmllang="en">34<head>5<metacharset="utf-8">6<metaname="viewport"content="width=device-width,initial-scale=1.0">7<title>Document</title> 查看详情

vue结合后台的增删改案例(代码片段)

首先列表内容还是与之前的列表内容类似，不过此处我们会采用Vue中数据请求的方式来实现数据的增删。那么我们使用的Vue第三方组件就是vue-resource，vue发起请求的方式与jQuery的ajax相似，组要是请求地址与参数。和方法首先我... 查看详情

vue中自定义列表复选框和全选框-案例(代码片段)

效果图主要代码实现<divclass="isck"@click="btnCheck(item)"> <img v-show="item.isCheck" class="opt" src="@/assets/images/btn/btn_opt_s_r_ 查看详情

vue中自定义列表复选框和全选框-案例(代码片段)

效果图主要代码实现<divclass="isck"@click="btnCheck(item)"> <img v-show="item.isCheck" class="opt" src="@/assets/images/btn/btn_opt_s_r_ 查看详情

尚硅谷vue系列教程学习笔记(代码片段)

...谷Vue系列教程学习笔记（8）071-TodoList案例-初始化列表072-TodoList案例-添加数据073-TodoList案例-勾选动作实现074-TodoList案例-删除动作075-TodoList案例-底部统计功能实现076-TodoList案例-底部交互动作实现077-TodoList案例-总结078-浏... 查看详情

尚硅谷vue系列教程学习笔记(代码片段)

前端vue+elementui案例：通用后台管理系统-登陆不同用户显示不同菜单动态添加路由(代码片段)

...，vue后台管理系统，前端面试，前端面试项目案例链接【前端】Vue+ElementUI案例：通用后台管理系统-导航栏（视频p 查看详情

vue+elementui：vue+element案例(代码片段)

文章目录一、导入项目二、安装Element安装依赖项目导入三、页面路由添加页面配置路由四、安装SCSS1.安装依赖2.添加配置3.如何使用4.使用测试五、安装axios六、安装Mock.js一、导入项目打开Hbuilder，文件-->导入—>从本地导... 查看详情

vue实现商品列表的添加删除(代码片段)

1<divid="app">2<divclass="container"><formclass="form-inline">3<divclass="form-group"><labelfor="exampleInputName2">ID：</label><inputid="exampleInputName2"class= 查看详情

vue中使用andt组件a-table列表数据根据点击的表头进行升/降排序-案例(代码片段)

官方示例-API链接数据根据当前点击的内容进行升降排序使用步骤数据量过少，可以使用前端排序方式//官方案例<template><a-table:columns="columns":data-source="data"@change="onChange"/></templat 查看详情