1.数据筛选
<p>{{number|过滤器名称}}</p>
//全局过滤器
Vue.filter('过滤器名称',function (value) {
return value>0 //返回大于0的数据
})
2.文本格式化
<template>
<div>
<!--使用过滤器-->
{{ dateStr | formatDate }}
<ul>
<li v-for="(item, index) in list" :key="index">
<!--在v-for中使用过滤器-->
{{ item.date | formatDate }}
</li>
</ul>
</div>
</template>
<script>
import { format } from '@/utils/date'
export default {
filters: {
formatDate(value) {
return format(value, 'yyyy-MM-DD HH:mm:ss')
}
},
data() {
return {
dateStr : Date.now(),
list: [
{
date: Date.now()
}
]
}
}
}
</script>
3.组止事件冒泡
<div @click="parent">
<div @click.stop="children">
点我
</div>
</div>
4.组止事件默认行为
<a href="http://www.baidu.com" @click.prevent="children"> 点我 </a>
5.点击回车提交
<input type="text" @keyup.enter="submit">
6.表格文字居中对齐
在el-table中增加
:cell-style="cellStyle"
:header-cell-style="rowClass"
在methods中增加
methods:{
//表内容居中
cellStyle({row,column,rowIndex,columnIndex}){
return "text-align:center"
},
//表头居中
rowClass({row,rowIndex}){
return "text-align:center"
}
}
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()
}
}
})
9.Vue.set: 解决新增属性无法触发数据响应
/**
* target 要修改的对象
* prpertyName 要添加的属性名称
* value 要添加的属性值
*/
this.$set(target, propertyName, value)
10.Vue.use:安装插件
/**
* plugin: 要安装的插件 如 ElementUI
* options: 插件的配置信息 如 {size: 'small'}
*/
Vue.use(plugin, options)
//例如 Vue.use(ElementUI,{size: 'small'});