1.数据筛选
新数组=原数组.filter(p=>p.name.indexOf(筛选条件)>=0)
<p>{{number|过滤器名称}}</p>
Vue.filter('过滤器名称',function (value) {
return value>0 //返回大于0的数据
})
2.数据排序
原数组.sort(function(p1,p2){
return p1.age-p2.age //升序
//降序 return p2.age-p1.age
})
3.组止事件冒泡
<div @click="parent">
<div @click.stop="children">
点我
</div>
</div>
4.组止事件默认行为
<a href="http://www.baidu.com" @click.prevent="children"> 点我 </a>
1
5.点击回车提交
<input type="text" @keyup.enter="submit">
1
6.表格文字居中对齐
在el-table中增加
:cell-style="cellStyle"
:header-cell-style="rowClass"
1
2
在methods中增加
methods:{
//表内容居中
cellStyle({row,column,rowIndex,columnIndex}){
return "text-align:center"
},
//表头居中
rowClass({row,rowIndex}){
return "text-align:center"
}
}
10
6.获得当前行的数据 v-model="scope.row"
<el-table-column
label="待还日期"
width="240%">
<template slot-scope="scope">
<el-date-picker
//获得当前行的数据
v-model="scope.row.daihuanshijian"
type="date"
placeholder="选择日期"
size="mini"
:picker-options="selectDate"
@change="changeDate(scope.row)">
</el-date-picker>
</template>
</el-table-column>
7.获得某一个元素对象
<p ref="content">hello word</p>
<button @click="getP()"></button>
methods:{
getP(event){
event.target //获得当前元素对象
this.$refs.content //获得p元素对象
}
}
8.自定义指令
自定义全局指令
<p v-upper-text="msg"></p>
Vue.directive('upper-text',function (el,binding) {
// el:指令所在的标签对象
// binding:包含指令相关信息数据的对象
//将msg的值转换成全大写
el.textContent=binding.value.toUpperCase()
})
自定义局部指令
<p v-lower-text="msg"></p>
new Vue({
directives:{
'lower-text'(el,binding) {
// el:指令所在的标签对象
// binding:包含指令相关信息数据的对象
//将msg的值转换成全小写
el.textContent=binding.value.toLowerCase()
}
}
})
---------------------
vue 小知识
猜你喜欢
转载自blog.csdn.net/weixin_43453916/article/details/88971715
今日推荐
周排行