第三天
- v-if和v-show
<button value="按钮" @click="change"></button>
<!--
v-if每次都会重新删除和创建元素
若频繁隐藏和显示元素 v-if有较高的切换性能消耗
-->
<!--
v-show不会删除,只是给元素加了display:none样式
若元素永远不会被显示 则v-show有较高的初始渲染消耗
-->
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
change(){
this.flag=!this.flag;
}
关于品牌管理案例
首先是添加和删除功能
<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:
</label>
<input v-model="id" name="" id="" value="" class="form-control"/>
<label>
Name:
</label>
<input v-model="name" name="" id="" value="" class="form-control"/>
<input type="button" value="添加" class="btn btn-primary" @click="add"/>
</div>
</div>
<table class="table table-striped table-bordered table-hover">
<thead>
<th>ID</th>
<th>NAME</th>
<th>CTIME</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="item in list" :key="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>
这里是界面的实现,注意用到了bootstrap的面板,表单和表格。对表格的渲染只需要写一个tr。记住这些用法!!!
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{id:1,name:'张如意1',ctime:new Date()},
{id:2,name:'张如意2',ctime:new Date()},
]
},
methods:{
add(){
console.log("ok");
this.list.push({id:this.id,name:this.name,ctime:new Date()});
this.id='';
this.name='';
},
del(id){
//如何根据id找到要删除的这一项的索引
//如果找到了索引,则使用数组的splice方法
this.list.some((item,i)=>{
console.log("开始了循环");
console.log(id);
if(item.id==id){
this.list.splice(i,1);
console.log("找到了id");
//在some方法中,如果return true,则会终止循环
return true;
}
})
}
})
</script>
删除方法还可以用
//findindex专门用来查找索引
del(id){
var index=this.list.findIndex(item=>{
if(item.id=id){
return true;
}
})
this.list.splice(index,1);
}
}
- 这里用到了两种方法,分别是some和findindex,都是vue中查找下标的方法。some()方法返回true或false,一旦返回true则停止循环;findindex()方法返回查找到的索引,查找到了就停止循环,没有查找到则返回-1.some()和findindex()都不能对空数组进行操作
- 在methods的某个方法中若还要引用一个方法,则用=>表示在这个新引用的方法中可以通过this访问data中的值,不用=>是访问不到的
- 数组中的splice()方法从数组中删除或添加一个项目,然后返回新的项目,该方法会改变原始数组
例如:
arr.splice(2,0,“William”)
arr.splice(2,1,“William”)
arr.splice(2,3,“William”)
接下来是搜索功能
因为list是固定的,所以要改为<tr v-for="item in search(keywords)" :key="item.id">
添加绑定事件<input v-model="keywords" name="" id="" value="" class="form-control"/>
新增search方法:
search(keywords){
var newlist=[];
this.list.forEach(item=>{
if(item.name.indexOf(keywords)!=-1){
newlist.push(item);
}
})
return newlist;
}
或者用过滤器:
var newlist=this.list.filter(item=>{
if(item.name.includes(keywords)){
return item;
}
})
return newlist;
- foreach()方法用于调用数组的每个元素,并将元素返回给回调函数.在这里,foreach每遍历数组中的一个值,并把这个值返回给item
foreach()不会对空数组执行回调函数
- filter()方法创建一个新的数组,返回所有符合条件的数组,如果没有符合条件的则返回空数组
filter()不会对空数组进行检测,不会改变原始数组
- indexof()方法返回某个指定字符串值在字符串中首次出现的位置,如果没有则返回-1.对大小写敏感
- includes()方法判断一个字符串中是否包含一个指定的值,是则返回true,否则flase
- 过滤器
定义和引用
{{item.ctime|dateFormat}}
Vue.filter('dateFormat',function(datestr){
var dt=new Date(datestr);
console.log(dt);
var year=dt.getYear();
console.log(year);
var month=(dt.getMonth()+1).toString().padStart(2,'0');
var day=dt.getDate().toString().padStart(2,'0');
return year+'-'+month+'-'+day;
// return ${year}-${month}-${day};
})
-
ES6中的字符串新方法padStart(maxLength,fillString=’’)或padEnd(maxLength,fillString=’’)来填充字符串
例如:var month=(dt.getMonth()+1).toString().padStart(2,'0');
-
按键修饰符
例如:@keyup.enter="add"
或@keyup.113="add"
(表示按了f2键)
自定义全局按键修饰符Vue.config.keyCodes.f2=113;
引用:@keyup.f2
-
自定义指令
//自定义指令
//定义的时候不用加v-,使用的时候要加v-
//参数一:名称 参数二:对象
Vue.directive('focus',{
bind:function(el){//当指令绑定到元素上时,执行一次bind函数
//这个方法是没有效果的
//因为元素刚绑定指令的时候,还没有插入到DOM中去,就获取不了焦点
el.focus();
},
inserted:function(el){//元素插入到DOM中时执行
el.focus();
},
updated:function(){//VNode更新时执行,可能会触发多次
},
});