先了解一下computed和watch:
computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上**进行双向数据绑定**展示出结果或者用作其他处理;
computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
与watch之间的区别:
watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象,只能监控整个对象或单个变量。watch一般用于监控路由、input输入框的值特殊处理等等,它比较适合的场景是一个数据影响多个数据
用element table做一个模糊查询
代码:
<template> //中间有省略
<el-form :inline="true" class="demo-form-inline" style="float: left;margin-top: 10px">
<el-form-item >
<el-input v-model="search" placeholder="请输入搜索内容"></el-input> //自动查询
</el-form-item>
</el-form>
<el-table
:data="this.tables"
highlight-current-row
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="employeeId"
label="员工号"
sortable
width="200">
</el-table-column>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
tableData: [],
search: ''
}
}, //重点在下面
computed: {
// 模糊搜索
tables:function() {
const search = this.search
if (search) {
// filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
// 注意: filter() 不会对空数组进行检测。
// 注意: filter() 不会改变原始数组。
return this. tableData.filter(data => {
// some() 方法用于检测数组中的元素是否满足指定条件;
// some() 方法会依次执行数组的每个元素:
// 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测;
// 如果没有满足条件的元素,则返回false。
// 注意: some() 不会对空数组进行检测。
// 注意: some() 不会改变原始数组。
return Object.keys(data).some(key => {
// indexOf() 返回某个指定的字符在某个字符串中首次出现的位置,如果没有找到就返回-1;
// 该方法对大小写敏感!所以之前需要toLowerCase()方法将所有查询到内容变为小写。
return String(data[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.tableData;
}
},
methods:{
}}
</script>
这个查询只是在当前页面的数据查询,后期会做从后台查到数据返回
今天还学到一个怎么生命全局变量
在data里面声明一个a,在方法中用this.a就可以用了
还可以用return