VUE错误记录 - 品牌后台练习 search(); 数组 splice forEach push 箭头函数
methods:{
add(){
var car = { id: this.id, name: this.name, ctime: new Date()};
this.list.push(car);
},
del(id){
this.list.splice(id,1); // 数组里删除， 用splice remove是操作dom的
},
search(keywords){ // 做搜索要明确是从哪个里面去搜。
var newList = [];
// if(this.list.name.indexOf(keywords) != -1){
// list里面有多个对象， 应该是某个对象的name符合关键字， 即 item.name.indexOf
// this.list.push(); // 应该是push到新数组里面去。 newList.push(item);
// };
this.list.forEach(item => { // 遍历 list 里的每个对象 // 再看一下箭头函数的课
if (item.name.indexOf(keywords) != -1){
newList.push(item);
};
});
return newList;
},
}
<body>
<div id="app">
<!--
本例要记的
bootstrap类 form-inline 水平排列表单。
bootstrap类 form-control
findIndex();
splice();
push();
some();
padStart ?? 补 0
filter();
forEach();
VNode 是什么？？ methods 里面 del(id); 部分要再看一下。
自定义指令 v-focus
-->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline" >
<label>
Id:<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:<input type="text" class="form-control" v-model="name" @keyup.enter="add();">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add();">
<label>
搜索名称关键字:<input type="text" class="form-control" v-focus v-model="keywords">
</label>
</div>
</div> <table class="table table-hover table-bordered table-striped" >
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | dateFormat}}</td>
<td><a href="javascript:;" @click="del();">删除</a></td>
</tr>
</tbody>
</table>
</div> <script>
Vue.filter('dateFormat', function(dateStr, pattern=''){
var dt = new Date(dateStr);
var y = dt.getFullYear();
var m = dt.getMonth() +1;
var d = dt.getDate(); return `${y}-${m}-${d}`;
}); Vue.directive('focus', {
inserted: function (el) {
el.focus();
},
}); var vm = new Vue({
el:'#app',
data:{
id: '',
name: '',
keywords: '',
list:[
{id:1, name:'宝马', ctime:new Date()}, // 这里要现在外面定义 id name ctime
{id:2, name:'奔驰', ctime:new Date()}
]
},
methods:{
add(){
var car = { id: this.id, name: this.name, ctime: new Date() };
this.list.push(car);
// 直接push到list就可以，不用管怎么加到表格里。v-for会自动渲染。
this.id = this.name = '';
},
del(id) { // 1. 如何根据Id，找到要删除这一项的索引
// 2. 如果找到索引了，直接调用 数组的 splice 方法 /* this.list.some((item, i) => {
if (item.id == id) {
this.list.splice(i, 1)
// 在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环
return true;
}
}) */ var index = this.list.findIndex(item => {
if (item.id == id) {
return true;
}
});
// console.log(index)
this.list.splice(index, 1);
},
search(keywords) {
// search是在 列表里， 所以要联想到调用list[] 数组筛选的方法。
/* var newList = []
this.list.forEach(item => {
if (item.name.indexOf(keywords) != -1) {
newList.push(item)
}
})
return newList */ // 直接return 后面整个函数的返回值。 记住这个新用法。
// 省去了开头的var newList 和 末尾的 return newList。 直接不需要中间变量。
return this.list.filter(item => {
if (item.name.includes(keywords)) {
return item;
};
});
// return newList
}
}
});
</script>
</body>
VUE错误记录 - 品牌后台练习 search(); 数组 splice forEach push 箭头函数的更多相关文章
- vue 错误记录
1.错误信息: You may use special comments to disable some warnings.Use // eslint-disable-next-line to ign ...
- Vue 错误记录：Cannot read property 'beforeRouteEnter' of undefined
点击某路由链接,页面提示: Cannot read property 'beforeRouteEnter' of undefined 查看代码并无手写beforeRouterEnter设置, 把页面内 ...
- VUE错误记录 - 小球模拟购物车
<body> <div id="app"> <input type="button" value="Add to Car ...
- vue错误记录
启动时报错如下 D:\QQFile\\FileRecv\industry_vue>cnpm run dev > vue_demo@ dev D:\QQFile\\FileRecv\indu ...
- 21.VUE学习之-操作data里的数组变异方法push&unshit&pop&shift的实例应用讲解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中如何实现后台管理系统的权限控制
vuejs单页应用的权限管理实践 一.前言 在广告机项目中,角色的权限管理是卡了挺久的一个难点.首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 接口访问的权限控制 页面的权限控制 菜单 ...
- 1.使用Vue.js实现品牌案例添加功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue_shop(基于vue电商管理后台网站)
vue_shop 目录 vue_shop day01 实现登录功能 项目预开发处理 Login.vue完整代码: 处理步骤: 添加element-ui的表单组件 添加第三方字体: 添加表单验证 导入a ...
- Vue 问题记录
Vue 问题记录 汇总日常开发中遇到的关于vue的问题 VeeValidator 语言设置 校验消息默认是英文的,定义中文或其他语言的错误提示消息 import VeeValidate from 'v ...
随机推荐
- UVA Watering Grass
贪心算法. #include <iostream> #include <cstdio> #include <cstring> #include <queue& ...
- Vim使用心得总结
基本快捷键 v 进入可视模式 i / a 光标前/后插入模式 I / A 行首/末插入模式 Crtl+c 进入命令模式 Crtl+v 进入块可视模式 Q 进入EX模式 gh 进入选择模式 u 撤销 U ...
- angular-cli6使用ng serve --o 控制台报错Invalid Host Header
angular-cli6使用ng serve --o 运行创建的项目,能正常访问,但是控制台一直在报错,点击报错能看到是因为webpack的webpack-dev-server里报的错, 看到网上介绍 ...
- 用Shell脚本过滤Hadoop中不能訪问的节点
近期使用的一个集群hp1,由于维护集群的人不给力.节点总是过一段时间就掉一两个.今天发现重新启动hadoop时,HDFS已经进入保护模式了. 决定把slaves节点中的无法訪问的节点所有过滤掉.所以写 ...
- 配置Xcode版本控制SVN详细步骤内含解决Xcode/Mac OS10.8无法配置SVN的解决方法
本站文章均为李华明Himi原创,转载务必在明显处注明:(作者新浪微博:@李华明Himi ) 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/game-de ...
- hdoj-1593-find a way to escape【数学题】
find a way to escape Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- Day1上午解题报告
预计分数:100+60+0=160 实际分数:100+30+20=150 T1立方数(cubic) 题目描述 LYK定义了一个数叫“立方数”,若一个数可以被写作是一个正整数的3次方,则这个数就是立方数 ...
- string StartsWith 方法 Https
public ActionResult Index() { string url = "Https://www.baodu.com"; ...
- js简易留言板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- WPF中RichTextBox高度自适应问题解决方法
最近做一个项目需要用到RichTextBox来显示字符串,但是不允许出现滚动条,在RichTextBox宽度给定的条件下,RichTextBox的高度必须正好显示内容,而不出现下拉滚动条. 这样就要计 ...