小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
在项目中使用过滤器想使用data中的数据但是返回的this是undefined ：
如何vue 中 filters 如何获取data里的数据
1.声明一个全局变量
let that;
2.在生命周期 beforeCreate里面改变this指向
beforeCreate: function () {
that = this;
}
3.局部filters中使用
借助案例讲解：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item,index) in list" :key="index">
<p style="color: rgb(219, 153, 29);">姓名:{{item.name}}</p>
<p style="color: rgb(228, 25, 143);">性别:{{item.sex | sexFilter}}</p>
</div>
</div>
<script>
let that = null
//参数
var app = new Vue({
el: "#app", //绑定元素
//所有数据都放在数据属性中
data: {
a: {
haha: "1111"
}
},
name: 'UserFilters',
data() {
return {
sexOption: [{
label: '男',
value: 0
}, {
label: '女',
value: 1
}],
list: [{
name: '张三',
sex: 0
}, {
name: '李四',
sex: 1
}]
}
},
beforeCreate: function () {
that = this;
},
filters: {
//性别过滤显示
sexFilter(data) {
// console.log(that);
let resultData = ''
that.sexOption.forEach(element => {
if (element.value == data) {
resultData = element.label
}
});
return resultData
}
}
})
</script>
</body>
</html>
