正文

指令综合运用-品牌案例.html

yangyunhao  2022-02-17  140

关键词：

案列：使用vue实现品牌的增加，删除和关键字搜索以及时间的处理

分析:手动实现筛选的方式：

筛选框绑定到vm实列中的searchName属性中：

<hr> 输入筛选名称：

<input type="text" v-model="searchName">

使用v-for指令循环每一行的数据的时候，我们不再直接item in list ，而是“ in ”一个过滤的methods方法，同时把过滤条件searchName 传递进去：

<tbody>

      <tr v-for="item in search(searchName)">

        <td>{{item.id}}</td>

        <td>{{item.name}}</td>

        <td>{{item.ctime}}</td>

        <td>

          <a href="#" @click.prevent="del(item.id)">删除</a>

        </td>

      </tr>

    </tbody>

search过滤方法中，使用数组filter方法进行过滤，实现关键字搜索：

search（）{
    return this.list.filter(x=>{
         return x.name.indexof(name)!=-1;

   });  
}

重头大戏开场

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>vue实列</title>
  7     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  8     <!-- 引用css库 -->
  9     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 10 </head>
 11 <body>
 12     <div id="app">
 13 
 14         <div class="panel panel-preimary">
 15             <div class="panel-heading">
 16                 <h3 class="panel-title">添加产品</h3>
 17             </div>
 18             <div class="panel-body form-inline">
 19                 <label>
 20                     ID:
 21                     <input type="text" class="form-control" v-model="id">
 22                 </label>
 23                 <label>
 24                     Name:
 25                     <input type="text" class="form-control" v-model="name">
 26                 </label>
 27                     <!-- 在vue中使用时间绑定机制，为元素指定处理函数时候，如果我们加了小括号，就可以给函数传参 -->
 28                     <input type="button" value="添加" class="btn btn-primary" @click="add">
 29                     <label>
 30                         搜索关键字：
 31                         <input type="text" class="from-control" v-model="keywords">
 32                     </label>
 33             </div>
 34         </div>
 35         <table class="table table-bordered table-hover table-striped">
 36             <thead>
 37                 <tr>
 38                     <th>Id</th>
 39                     <th>Name</th>
 40                     <th>CTIME</th>
 41                     <th>OPERATION</th>
 42                 </tr>
 43             </thead>
 44             <tbody>
 45             
 46                 <!-- 之前的-for 中的数据都是从data当中直接渲染过去的 -->
 47                 <!-- 现在我们，自定义一个search方法，同时我们把所有的关键字，通过传参的形式传递给search -->
 48                 <!-- 在search中我们通过执行for循环把所有符合的关键字保存在一个新的数组中 -->
 49 
 50                 <tr v-for="item in search(keywords)" :key="item.id">
 51                     <td>{{ item.id }}</td>
 52                     <td v-text="item.name"></td>
 53                     <td>{{ item.ctime | dateFormat(‘yyyy-MM-dd‘)}}</td>
 54                     <td>
 55                       <a href="" @click.prevent="del(item.id)">删除</a>
 56                     </td>
 57                   </tr>
 58             </tbody>
 59         </table>
 60     </div>
 61 
 62 
 63     <script>
 64         
 65         Vue.filter(‘dateFormat‘,function (dateStr,pattern=‘‘) {
 66             //根据字符串获取特定时间
 67             var dt = new Date(dateStr)
 68             //yyy-mm-dd
 69             var y = dt.getFullYear()
 70 
 71             var m = dt.getMonth()+1
 72 
 73             var d = dt.getDate()
 74             if(pattern && pattern.toLowerCase() == ‘yyy-mm-dd‘){
 75                 return ‘${y}-${m}-${d}‘
 76             }else{
 77                 var hh = dt.getHours()
 78                 //padStart:开始填充；padEnd()：末尾填充（如两位填充数字1：01和10）
 79                 var mm = (dt.getMinutes()).toString().padStart(2,‘0‘)
 80                 var ss = (dt.getSeconds()).toString().padStart(2,‘0‘)
 81                 return ‘${y}-${m}-${d} ${hh}:${mm}:${ss}‘
 82             }
 83         })
 84 
 85         var vm = new Vue({
 86             el:"#app",
 87             data :{
 88                 dt:new Date(),
 89                 id:null,
 90                 name:null,
 91                 keywords:‘‘,
 92                 list:[
 93                     { id: 1, name: ‘蛋挞‘, ctime: new Date() },
 94                     { id: 2, name: ‘奶茶‘, ctime: new Date() }
 95 
 96                 ]
 97 
 98             },
 99             methods:{
100        
101 
102 
103                 add(){
104                     //console.log(‘ok‘)
105                     //分析
106                     //1.获取到id与name直接从data中获取
107                     //2.组织出一个对象
108                     //3.把这个对象，调用数组的方法， 添加到当前list中
109                     //4.在vue中我们已经实现了数据的双向绑定通过v-model每当我们修改data中的数据的时候我们vue会默认监听会默认监听到数据的改动，自动把最新的数据，应用到页面上
110                     //5.在vue中我们更多的是在进行 VM中 Model 数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作；
111 
112 
113                     var food = { id: this.id, name: this.name, ctime: new Date()}
114 
115                     this.list.push(food);
116                     this.id = this.name =‘‘;
117                 },
118                 del(id){
119                     //我们根据ID进行数据的删除
120                     //1.我们根据Id找到我们要删除项的索引
121                     //2.如果我们找到了索引就开始调用数组的splice的方法
122 
123                  /*   this.list.some((item,i) => {
124                         if(item.id == id){
125                             this.list.splice(i,1)
126                             //在数组some方法中如果reyurn true，就会立即终止这个数组的后续循环
127                             return true;
128                         }
129 
130                     }) */
131 
132 
133                     var index = this.list.findIndex(item=>{
134                         if(item.id == id){
135                             return true;
136                         }
137                     })
138                     //console.log(index)
139                     this.list.splice(index,1)
140                 },
141                 search(keywords){
142 
143                     /* var newlist = []
144                     this.list.forEach(item=>{
145                         if(item.name.indexof(keywords)!=-1){
146                             newList.push(item)
147                         }
148                     })
149                     return newList(item)*/
150 
151                     //注意：  forEach   some   filter   findIndex   这些都属于数组的新方法，
152                     //都会对数组每一项进行遍历执行相关操作
153                     return this.list.filter(item =>{
154                                     // if(item.name.indexOf(keywords) != -1)
155 
156                                     // 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes(‘要包含的字符串‘)
157                                     //  如果包含，则返回 true ，否则返回 false
158                                     //  contain
159                                     if (item.name.includes(keywords)) {
160                                     return item
161                                     }
162                     })
163                     //return newList
164                                  
165                 }
166             },
167             filters: { // 定义私有过滤器    过滤器有两个 条件  【过滤器名称 和 处理函数】
168         // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
169         dateFormat: function (dateStr, pattern = ‘‘) {
170           // 根据给定的时间字符串，得到特定的时间
171           var dt = new Date(dateStr)
172           return dateStr
173         },
174 
175             }
176         })
177     </script>
178 </body>
179 </html>

javase案例02——date日期类时间格式化类的综合运用案例(代码片段)

需求：请写出”2022-11-0409:30:30“往后1天15小时，30分29秒后的时间是多少？思路：定义一个字符串时间把字符串的时间解析成Date日期对象得到日期对象的时间毫秒值+往后走1天15小时，30分29秒把时间毫秒值转换成喜欢的字符串的... 查看详情

黑马程序员最新版javaweb综合案例(前后端完整版)(代码片段)

JavaWeb综合案例学习视频链接:黑马程序员最新版JavaWeb基础教程，Javaweb从入门到企业实战完整版完整代码链接：https://github.com/HaiLei-Fly/JavaWeb-brand1、功能介绍案例功能：用户登录（账号密码登录）用户注册（... 查看详情

angularjs综合笔记案例

...}AngularJS使用表达式把数据绑定到HTML，这与 ng-bind 指令有异曲同工之妙。AngularJS将在表达式书写的位置"输出"数据。AngularJS表达式很像 JavaScript表查看详情

综合运用之拖动模态框案例(代码片段)

在制作该案例之前，我们需要先做好准备工作！有句话怎么说来着？！没错！磨刀不误砍柴工！目录 Offset系列概念代码实操Offset知识点小结拖动模态框案例Javascript全部代码总结首先，我们要先复习一... 查看详情

css——background综合运用

搜索栏图标：<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><style>input{width:270px;height:28px;background:url(‘serch.jpg‘)no-repeatrightcenter;}< 查看详情

html基础2——综合案例3——创建考试报名表格

1<html>23<head>4<title></title>5</head>67<body>8<tablewidth="600px"height="500px"cellspacing="0"border="1">9<tr>10<tdalign="left">姓名</td>11& 查看详情

html基础2——综合案例2——复杂的嵌套列表

1<html>23<head>4<title></title>5</head>67<body>8<ultype="disc">9<li>太阳</li>10<li>月亮</li>11<li>地球</li>12<listyle="list-s 查看详情

html基础2——综合案例1——如何用iis配置网站

1.打开iis 如果机子上面没有iis，可以先装一个，不同的系统可能安装步骤不一样，至于iis的安装方法，大家可以去百度找找。 2.准备网站源程序既然要配置网站，肯定要先准备好网站源程序，网站源程序可以去... 查看详情

css33d变换之综合运用-3dbox

先上效果图吧点击‘roll‘按钮，会出现旋转的动画代码如下<!DOCTYPEhtml><html><head><title></title><scripttype="text/javascript"src="JS/jquery-1.12.2.min.js"></script><styletype="text/ 查看详情

学习react-简单小案例--综合案例

<html><head><title></title><metacharset="UTF-8"/><scriptsrc="js/react.min.js"type="text/javascript"charset="utf-8"></script><scriptsrc="js/react-dom.min.js 查看详情

wpf--3dmax+blend+wpf综合运用

原文:WPF--3Dmax+blend+WPF综合运用引自：http://blog.sina.com.cn/s/blog_95dbdf9e0100we3z.html 本人小菜，WPF刚入门，只是写一下最近的项目心得。欢迎各位前辈们前来拍砖指正，感激不敬！先申明，小弟我入门仓促，很多东西也是一知半解... 查看详情

wpf--3dmax+blend+wpf综合运用

...甚解，所以大神们就直接绕路算了。总结一：3Dmax+blend+WPF综合运用开发环境：Autodesk3dsMaxDes 查看详情

sql数据分析之子查询的综合用法和案例题耐心整理

...在前面一、子查询基础用法二、子查询综合用法（难题）零、写在前面本文所有代码均是在SQLZOO平台进行，数据也该平台下的world表和一些其他平台提供的数据表，所有代码均已通过测试。一、子查询基础... 查看详情

黑马程序员前端-html+css综合案例：土豆网鼠标经过显示遮罩(代码片段)

...容了，因为篇幅问题，请看文末。今天开始学习综合案例目录1、学习目标2、核心原理3、参考代码4、往期汇总我们先来看看综合案例的效果图：1、学习目标练习元素和显示与隐藏练习元素的定位2、核心原理原先半... 查看详情

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

品牌列表案例（仅添加）1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title></title>6<scriptsrc="../js/vue.js"></script>7<linkrel="stylesheet"type="text/cs 查看详情

linuxcentos8（http综合案例-用户登录）(代码片段)

LinuxCentOS8（HTTP-用户登录）当服务器端希望客户端以特定的用户进行访问访问时，可以运用HTTP的用户登录功能。HTTP有四种对用户身份验证的方式，分别为BASIC认证，DIGEST认证，SSL客户端认证和Web表单认证。... 查看详情

linuxcentos8（http综合案例-用户登录）(代码片段)

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

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