1、数组方法
1、变异方法
变异方法会修改原有数据
- push():添加元素
- pop():删除元素
- shift()
- unshift()
- splice()
- sort()
- reverse()
<body>
<div id="app">
<input type="text" v-model="pname" />
<li :key='index' v-for="(item,index) in lists">{{item}}</li>
<button @click="addin">添加</button>
<button @click="delp">删除</button>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
lists:['zhangsan','lisi','wanger'],
pname:''
},
methods:{
addin:function(){
this.lists.push(this.pname)
},
delp:function(){
this.lists.pop(this.pname)
}
}
})
</script>
</body>
2、替换数组
替换数组会生成新的数组
- filter()
- concat()
- slice()
<body>
<div id="app">
<input type="text" v-model="pname" />
<li :key='index' v-for="(item,index) in lists">{{item}}</li>
<button @click="addin">添加</button>
<button @click="delp">删除</button>
<button @click="change">替换</button>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
lists:['zhangsan','lisi','wanger'],
pname:''
},
methods:{
addin:function(){
this.lists.push(this.pname)
},
delp:function(){
this.lists.pop(this.pname)
},
change:function(){
this.lists=this.lists.slice(0,2)
}
}
})
</script>
</body>
2、数组响应式变化(修改响应式数据)
- Vue.set(vm.items,indexOfItem,newValue)
- vm.$set(vm.items,indexOfItem,newValue)
①参数1表示要处理的数组名称
②参数2表示要处理的数组的索引
③参数3表示要处理的数组的值
<body>
<div id="app">
<li v-for="(item,index) in lists">{{item}}</li>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
lists:['zhangsan','lisi','wanger']
}
});
//vm.lists[1]='yuebuqun';//这个不能在页面中直接修改
//Vue.set(vm.lists,1,'munianci');//响应式修改数据,这个可以在页面中直接修改
vm.$set(vm.lists,1,'renyingying')//通过vm对象响应式修改数据,这个可以在页面中直接修改
</script>
</body>
数据为对象时,可以使用类似的方法
<body>
<div id="app">
<li v-for="(item,index) in lists">{{item}}</li>
<div>{{info.name}}</div>
<div>{{info.age}}</div>
<div>{{info.gender}}</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
lists:['zhangsan','lisi','wanger'],
info:{
name:'lisi',
age:12
}
}
});
//vm.lists[1]='yuebuqun';//这个不能在页面中直接修改
//Vue.set(vm.lists,1,'munianci');//响应式修改数据,这个可以在页面中直接修改
vm.$set(vm.lists,1,'renyingying')//通过vm对象响应式修改数据,这个可以在页面中直接修改
//vm.info.gender='male';//这个不能在页面中直接修改
//Vue.set(vm.info,'gender','female');//通过vm对象响应式修改数据,这个可以在页面中直接修改
vm.$set(vm.info,'gender','female');//通过vm对象响应式修改数据,这个可以在页面中直接修改
</script>
</body>
3、图书管理系统–图书列表
实现静态列表效果
基于数据实现模板效果
处理每行的操作按钮
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table{ border: 1px solid gray; border-collapse: collapse;}
.grid td{ padding: 5px; text-align: center;}
.grid tr{line-height: 35px; width: 400px; }
.grid th{background-color: orange;padding: 5px;}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="grid">
<table border="1">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td><a href="" @click.prevent="modifyCell">修改</a><span>|</span><a href="" @click.prevent="deleteCell">删除</a></span></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
books:[{
id:1,
name:'三国演义',
date:''
},
{
id:2,
name:'水浒传',
date:''
},
{
id:3,
name:'红楼梦',
date:''
},
{
id:4,
name:'西游记',
date:''
}]
},
methods:{
modifyCell:function(){
},
deleteCell:function(){
}
}
})
</script>
</body>
</html>
效果:
4、图书管理系统–添加图书
- 实现表单的静态效果
- 添加图书表单域数据绑定
- 添加按钮事件绑定
- 实现添加业务逻辑
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table{ border: 1px solid gray; border-collapse: collapse;}
.grid td{ padding: 5px; text-align: center;}
.grid tr{line-height: 35px; width: 400px; }
.grid th{background-color: orange;padding: 5px;}
.book{ background-color: orange; height: 40px; line-height: 40px;}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="grid">
<div>
<h1>图书管理</h1>
<div class="book">
<div>
<label for="id">编号</label><input type="text" id="id" v-model="id" />
<label for="name">编号</label><input type="text" id="name" v-model="name" />
<button @click="submitBook">提交</button>
</div>
</div>
</div><br/>
<table border="1">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td><a href="" @click.prevent="modifyCell">修改</a><span>|</span><a href="" @click.prevent="deleteCell">删除</a></span></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
id:'',
name:'',
books:[{
id:1,
name:'三国演义',
date:''
},
{
id:2,
name:'水浒传',
date:''
},
{
id:3,
name:'红楼梦',
date:''
},
{
id:4,
name:'西游记',
date:''
}]
},
methods:{
modifyCell:function(){
},
deleteCell:function(){
},
submitBook:function(){
var book={};
book.id=this.id;
book.name=this.name;
book.date='';
this.books.push(book);
//清空表单
this.id='';
this.date='';
},
}
})
</script>
</body>
</html>
5、图书管理系统–修改图书
- 1、修改信息填充到列表
- 2、修改后重新提交表单
- 3、重用添加和修改的方法
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table{ border: 1px solid gray; border-collapse: collapse;}
.grid td{ padding: 5px; text-align: center;border: 1px solid gray;}
.grid tr{line-height: 35px; width: 400px; }
.grid th{background-color: orange;padding: 5px;border: 1px solid gray;}
.book{ background-color: orange; height: 40px; line-height: 40px;}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="grid">
<div>
<h1>图书管理</h1>
<div class="book">
<div>
<label for="id">编号</label><input type="text" id="id" v-model="id" :disabled="flag" />
<label for="name">编号</label><input type="text" id="name" v-model="name" />
<button @click="handle">提交</button>
</div>
</div>
</div><br/>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td><a href="" @click.prevent="modifyCell(item.id)">修改</a><span>|</span><a href="" @click.prevent="deleteCell">删除</a></span></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
id:'',
name:'',
flag:true,
books:[{
id:1,
name:'三国演义',
date:''
},
{
id:2,
name:'水浒传',
date:''
},
{
id:3,
name:'红楼梦',
date:''
},
{
id:4,
name:'西游记',
date:''
}]
},
methods:{
modifyCell:function(id){
//先禁止修改id
this.flag='false';
//根据id来获得要编辑的数据,filter是筛选数组的方法,返回被筛选的结果(数组)
var book=this.books.filter(function(item){//这里的item就是数组books中的每一个元素,实际上遍历了books数组
return item.id==id
});
console.log(book);
//把获取到的信息填入到表单
this.id=book[0].id;
this.name=book[0].name;
},
deleteCell:function(){
},
handle:function(){
if(this.flag=='true'){
//修改操作
//根据当前的id去更新数组中对应的数据
//按照参数给定的方法对比books各元素(遍历)
this.books.some((item)=>{//箭头函数指定义这个函数的父级函数的作用域
if(item.id==this.id){//使用了箭头函数才调用到了this.id
item.name=this.name;
//完成更新操作后要终止循环
return true;
}
});
//重新允许修改编号
this.flag=false;
}else{
//添加操作
var book={};
book.id=this.id;
book.name=this.name;
book.date='';
this.books.push(book);
}
//清空表单
this.id='';
this.date='';
}
}
})
</script>
</body>
</html>
以上代码有些小瑕疵
6、图书管理系统–删除图书
- 删除按钮绑定事件处理方法
- 实现删除业务逻辑
第1种方法
deleteCell:function(id){
//删除图书
//根据id从数组中查找元素的索引
var index=this.books.findIndex(function(item){
return item.id==id;
});
//根据索引删除对象
this.books.splice(index,1);
},
第2种方法
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table{ border: 1px solid gray; border-collapse: collapse;}
.grid td{ padding: 5px; text-align: center;border: 1px solid gray;}
.grid tr{line-height: 35px; width: 400px; }
.grid th{background-color: orange;padding: 5px;border: 1px solid gray;}
.book{ background-color: orange; height: 40px; line-height: 40px;}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="grid">
<div>
<h1>图书管理</h1>
<div class="book">
<div>
<label for="id">编号</label><input type="text" id="id" v-model="id" :disabled="flag" />
<label for="name">编号</label><input type="text" id="name" v-model="name" />
<button @click="handle">提交</button>
</div>
</div>
</div><br/>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>
<a href="" @click.prevent="modifyCell(item.id)">修改</a>
<span>|</span>
<a href="" @click.prevent="deleteCell(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
id:'',
name:'',
flag:true,
books:[{
id:1,
name:'三国演义',
date:''
},
{
id:2,
name:'水浒传',
date:''
},
{
id:3,
name:'红楼梦',
date:''
},
{
id:4,
name:'西游记',
date:''
}]
},
methods:{
modifyCell:function(id){
//先禁止修改id
this.flag=true;
//根据id来获得要编辑的数据,filter是筛选数组的方法,返回被筛选的结果(数组)
var book=this.books.filter(function(item){//这里的item就是数组books中的每一个元素,实际上遍历了books数组
return item.id==id
});
//把获取到的信息填入到表单
this.id=book[0].id;
this.name=book[0].name;
},
deleteCell:function(id){
//删除图书
/*
//根据id从数组中查找元素的索引
var index=this.books.findIndex(function(item){
return item.id==id;
});
//根据索引删除对象
this.books.splice(index,1);
*/
//第二种方法
this.books=this.books.filter(function(item){
return item.id!=id;
});
},
handle:function(item){
if(this.flag=='true'){
//修改操作
//根据当前的id去更新数组中对应的数据
//按照参数给定的方法对比books各元素(遍历)
this.books.some((item)=>{//箭头函数指定义这个函数的父级函数的作用域
if(item.id==this.id){//使用了箭头函数才调用到了this.id
item.name=this.name;
//完成更新操作后要终止循环
return true;
}
});
//重新允许修改编号
this.flag=false;
}else{
//添加操作
var book={};
book.id=this.id;
book.name=this.name;
book.date='';
this.books.push(book);
this.flag=false;
}
//清空表单
this.id='';
this.name='';
}
}
})
</script>
</body>
</html>
7、常用特性应用场景
- 过滤器-----格式化日期
- 自定义指令-----获取表单焦点
- 计算属性(统计图书数量)
- 侦听器(验证图书存在性)
- 生命周期(图书数据处理)