- 品牌案例-完成品牌列表的添加功能
- 品牌案例-根据Id完成品牌的删除
- 品牌案例-根据关键字实现数组的过滤
- 过滤器-Vue中全局过滤器的基本使用
引入
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="js/vue.js"></script>
布局
<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 for="">
Id:
<input type="text" class="form-control" v-model="id">
</label>
<label for="">
Name:
<input type="text" class="form-control" v-model="name">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label for="">
搜索:
<input type="text" class="form-control" v-model="words">
</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>
<!-- <tr v-for="item in user)" :kwy="item.id"></tr> -->
<!-- 不可以定死user,定义一个函数,使得搜索关键字可以返回一个新数组 -->
<tr v-for="item in search(words)" :kwy="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
vue
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
words: '',
user: [
{ id: 1, name: '张三', ctime: new Date() },
{ id: 2, name: '李四', ctime: new Date() }
]
},
methods: {
// 添加
add() {
let newUser = { id: this.id, name: this.name, ctime: new Date() }
this.user.push(newUser)
},
// 删除 不可以定义delete
del(id) {
this.user.some((item, i) => {
if (item.id == id){
this.user.splice(i,1)
return true;
}
})
},
// 搜索关键字
search(words) {
/*
方法一
var newUserList = []
this.user.forEach((item,i) => {
if (item.name.indexOf(words) != -1) {
newUserList.push(item)
}
})
return newUserList
*/
//遍历数组:forEach、some、filter、findIndex
return this.user.filter(item => {
//item.name.indexOf(words) 一个字符串是否包含指定的字符串
//es6新增:string.prototype.includes(包含返回true)
//jq:$('containss')
if(item.name.includes(words)){
return item
}
})
}
}
})
</script>
过滤器基本使用
<body>
<div id="app">
<p>{{ msg | msgfn('cute') | test }}</p>
</div>
<script>
//定义全局的过滤器,名字为msgfn
Vue.filter('msgfn', function(msg,arg){
return msg.replace(/可爱/g, arg)
})
//定义全局的过滤器,名字为test
Vue.filter('test', function(msg){
})
var vm = new Vue({
el: '#app',
data: {
msg: '我可爱吗?什么,难道我不可爱嘛?你最不可爱了!'
},
methods: {}
})
</script>
</body>