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() } } }) ---------------------