练习实例：品牌列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<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"/>
</label>
<!-- add函数加不加括号都可以，需要传参时必须加括号 -->
<button type="button" class="btn btn-primary" @click="add">添加</button>
</div>
</div>
<!-- 表格 -->
<table class="table table-bordered table-hover 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}}</td>
<td>
<!-- 阻止默认行为,传参id -->
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
id : '',
name : '',
list : [
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'奥迪',ctime:new Date()}
]
},
methods: {
add(){ // 添加方法
// 获取id和name,直接从data中获取
// 组织一个对象
// 把这个对象添加到data中的list中
var brand = {id : this.id,name : this.name,ctime : new Date()};
this.list.push(brand);
// 清空内容
this.id = this.name = '';
},
del(id){ // 根据id删除数据
// 正常情况下可能是操作数据库执行sql语句
// 第一种删除处理方式
// this.list.forEach((elem,i)=>{
// if(elem.id == id){
// this.list.splice(i,1);
// }
// })
// 第二种删除处理方式,some()与forEach基本一致,some() return true 就立即停止了
// this.list.some((item,i) => {
// if(item.id == id){
// this.list.splice(i,1);
// return true;
// }
// })
// 第三种,使用findIndex,专门用来查找索引
var index = this.list.findIndex(item => {
if(item.id == id){
return true;
}
})
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
关键字过滤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<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"/>
</label>
<!-- add函数加不加括号都可以，需要传参时必须加括号 -->
<button type="button" class="btn btn-primary" @click="add">添加</button>
<label>
搜索名称关键字 : <input type="text" class="form-control" v-model="keywords"/>
</label>
</div>
</div>
<!-- 表格 -->
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- 注意：关键字过滤要根据最新的关键字，重新渲染数据，所以这里不能遍历list -->
<!-- 现在我们定义了一个serch方法，同时把所有关键字通过传参传递给serch方法 -->
<!-- 在serch方法内部通过执行for循环，把所有符合搜索关键字的数据保存到一个新数组中返回，遍历 -->
<tr v-for="item in serch(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<!-- 阻止默认行为,传参id -->
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
id : '',
name : '',
keywords : '',
list : [
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'奥迪',ctime:new Date()}
]
},
methods: {
add(){ // 添加方法
// 获取id和name,直接从data中获取
// 组织一个对象
// 把这个对象添加到data中的list中
var brand = {id : this.id,name : this.name,ctime : new Date()};
this.list.push(brand);
// 清空内容
this.id = this.name = '';
},
del(id){ // 根据id删除数据
// 正常情况下可能是操作数据库执行sql语句
// 第一种删除处理方式
// this.list.forEach((elem,i)=>{
// if(elem.id == id){
// this.list.splice(i,1);
// }
// })
// 第二种删除处理方式,some()与forEach基本一致,some() return true 就立即停止了
// this.list.some((item,i) => {
// if(item.id == id){
// this.list.splice(i,1);
// return true;
// }
// })
// 第三种,使用findIndex,专门用来查找索引
var index = this.list.findIndex(item => {
if(item.id == id){
return true;
}
})
this.list.splice(index,1)
},
serch(keywords){ // 根据关键字进行数据的搜索
// 第一种方式(forEach,some,filter,findIndex都属于数组的新方法)
// forEach不能中途终止
// some只要返回true,就代表终止
// filter返回一个数组
// findIndex可以返回索引
// var newList = [];
// this.list.forEach(item=>{
// if(item.name.indexOf(keywords) != -1){
// newList.push(item);
// }
// })
// return newList;
// filter的方式
var newList = this.list.filter(item=>{
if(item.name.includes(keywords)){
return item;
}
})
return newList;
}
}
})
</script>
</body>
</html>
过滤器
Vue中允许自定义过滤器，可被用作一些常见的文本格式化；
过滤器可用在两个地方：mustache插值{{}}和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由“管道”符表示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- msg是要处理的数据，msgFormat的第一个参数是要处理的数据 -->
<p>{{msg | msgFormat}}</p>
<!-- 过滤器也可以传参 -->
<p>{{msg | msgFormat('踢')}}</p>
<!-- 过滤器的链式操作，msgFormat处理完数据后交给test过滤器再进行处理 -->
<p>{{msg | msgFormat('踢') | test}}</p>
</div>
<script type="text/javascript">
// 不能写vm后
// 定义一个全局过滤器,名字叫msgFormat,data是要处理的数据
// arg0是传过来的参数
Vue.filter('msgFormat',function(data,arg0){
// 此处只能替换第一个
// return data.replace('削','盘');
// 此处是正则表达式,g代表全局匹配,
return data.replace(/削/g,'盘'+arg0);
})
Vue.filter('test',function(data){
return data+'==================';
})
var vm = new Vue({
el: '#app',
data: {
msg : '皱皱巴巴，麻麻赖赖，一点儿不圆润，削他，削他，削他'
},
methods: {}
})
</script>
</body>
</html>
网友评论