实现添加和删除功能
效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>ImplementCalculator</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" >
<!-- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<!-- II：第二步添加需要的组件完成页面样式效果 -->
<div class="panel-body form-inline">
<!-- 将两个值组成一个车对象,并把这个对象push到下文的文本框中，由于使用vue监管，所以给input添加双向数据绑定功能 -->
<div style="width: 10%;">
<label>
Id:
<!-- III：在input中创建一个v-model进行双向数据绑定，将输入的数据转到下面的展示文本中 -->
<input type="text" name="" id="" value="" class="form-control" v-model="id" />
</label>
<label>
Name:
<!-- III：在input中创建一个v-model进行双向数据绑定，将输入的数据转到下面的展示文本中 -->
<input type="text" name="" id="" value="" class="form-control" v-model="name"/>
</label>
</div>
<div>
<!-- III：在input中创建一个点击事件，逻辑将输入的数据转到下面的展示文本中，vue中绑定事件是用@-->
<!-- <input type="button" name="" id="" value="添加" class="btn btn-primary" @click="add" />
这里给add添加了括号
在vue中，使用事件绑定机制，为元素指定元素处理函数的时候，如果加了小括号，就可以给函数传参了
-->
<input type="button" name="" id="" value="添加" class="btn btn-primary" @click="add()" />
</div>
<div>
<label>
搜索名称关键字：
<!-- V：在input中创建一个v-model进行双向数据绑定，将输入的数据转到下面的展示文本中 -->
<input type="text" name="" id="" value="" class="form-control" v-model="keywords"/>
</label>
</div>
</div>
</div>
<!-- table table-bordered table-hover table-striped test这些都是bootstrap.css中已经定义好的样式，样式已经用class封装好了，只需要调用就可以了
另外，通过bootstrap官网可以直接查出当前样式效果，譬如：
在https://v3.bootcss.com/components/这个网页通过Ctrl+F在搜索框输入：primary，即可得到本文<div class="panel panel-primary">
中引用的css样式是bootstrap的什么效果。
-->
<table class="table table-bordered table-hover table-striped test">
<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"> 中，直接从data上的list中直接渲染过来，
现在，我们自定义一个serch(),同时将所有关键字通过传参的方式传递给search()
在search()内部，通过执行for循环，将所有符合搜索关键字的数据，保存到一个新数组的，返回
-->
<!-- <tr v-for="item in list" :key="item.id"> -->
<!--
将<tr v-for="item in list" :key="item.id">改成 <tr v-for="item in search(keywords)" :key="item.id">
-->
<tr v-for="item in search(keywords)" :key="item.id">
<!-- 用插值表达式 -->
<td>{{ item.id }}</td>
<!-- 也可以用v-text -->
<td v-text="item.name"></td>
<td>{{ item.ctime }}</td>
<td>
<!-- 删除是根据id来删除的，阻止它的默认行为用.prevent,使用传参来删除id,删除逻辑在methods中进行 -->
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- <script>
//知识点回顾，关于标签的命名问题
#app{
// 针对id使用#号来对标签进行css样式调整
}
.test {
// 针对class用.号来对标签进行css样式调整
}
</script> -->
<script type="text/javascript">
// 创建vue实例,得到ViewModel
var vm =new Vue({
el:'#app',
data:{
/*
IV：由于已经实现了双向数据绑定 ,但是还没有定义input标签中的逻辑，所以这里要定义以下这几个标签的逻辑。
*/
id:'',
name:'',
keywords:'',
/*
I：建立基础样式,得到想要的网页效果图
*/
list:[
{
id:1,
name:'奔驰',
ctime:new Date()
},
{
id:2,
name:'宝马',
ctime:new Date()
},
{ id:3, name:'大众',ctime:new Date()},
]
},
methods:{
// IV:add() 添加方法逻辑实现
add(){
/* 测试
console.log('检查add方法是否可用')
*/
/*
1，获取到id和name，直接从data中获取
2，组织出一个对象
3，将这个对象调用数组的相关方法，添加到当前data上的list中
4，注意，在vue中，已经实现了数据双向绑定，
每当我们修改了data中的数据，vue会默认监听到数据的改动，
自动把最新的数据引用到页面上
*/
/*
&&&&& 5，当我们意识到上面的第四步的时候，就证明我们已经入门vue了， &&&&&
&&&&& 需要进一步学习地是vue中vm的model数据操作， &&&&&
&&&&& 同时，在操作model数据的时候，指定的业务逻辑操作 &&&&&
*/
var car = {id: this.id, name: this.name, ctime:new Date()}
this.list.push(car)
// 输入并完成点击事件之后，清空input选项框中的内容,等号右边开始计算到左边
this.id = this.name = ''
},
del(id){//跟Id删除数据
/*
1，如何根据id，找到要删除这一项的索引
2，如果找到索引了，直接调用数组的splice方法
*/
// some()根据指示性条件进行判断，如果返回true,这个方法将会终止,实际中不知道id是否能找到,所以随时都会终止
/* 方法一：
this.list.some(item,i)=>{
if(item.id ==id){
// 在结束循环之前删除splice(从索引为i的位置开始删除，删除个数一个，没有要插入的数据置空)
this.list.splice(i,1)
// 在数组的some方法中,如果return ture ,就会立即终止这个数组的后续循环
return true;
}
}
*/
/*
方法二：
*/
var index = this.list.findIndex(item=>{
if(item.id == id){
return true;
}
})
// 做个测试检测idex对象
// console.log(index) 实验结果显示1
this.list.splice(index,1)
},
search(keywords){//根据关键字进行数据搜索
/*
搜索方式一：
*/
// var newList = []
// this.list.forEach(item=> {
// 定义和用法
// // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。注释：如果要检索的字符串值没有出现，则该方法返回 -1。
// if(item.name.indexOf(keywords) != -1){
// newList.push(item)
// }
// })
// return newList
/*
搜索方式二： 注意：forEach some filter findIndex 这些都属于数组的新方法
都会对数组中的每一项进行遍历，执行相关操作。
*/
var newList = this.list.filter(item =>{//filter中返回一个新的数组
// if(item.name.indexOf(keywords) !=-1 ){
// }
/*
用新方式：注意：ES6中（即JavaScript新版本中），为字符串提供了一个新方法，
叫做String.prototype.includes('要包含的字符串') 如果包含，返回true，否则
返回false
补充：jQuery中也有包含的方法 美元符号$选择器中，$(":contain(要查找的文本)")
*/
if(item.name.includes(keywords)){//includes如果返回true那这个if就返回一个item循环
return item
}
})
/*
这个return可以去掉，将上边代码：var newList = this.list.filter(item =>{ 改成:
return this.list.filter(item =>{
*/
return newList
}
}
});
</script>
</body>
</html>
1078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
