首页>>前端>>Vue->Vue中filters使用data的数据

Vue中filters使用data的数据

时间:2023-11-29 本站 点击:0

在项目中使用过滤器想使用data中的数据但是返回的this是undefined :

如何vue 中 filters 如何获取data里的数据

1.声明一个全局变量

letthat;

2.在生命周期beforeCreate里面改变this指向

beforeCreate:function(){that=this;}

3.局部filters中使用

借助案例讲解:

代码:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=,initial-scale=1.0"><title>Document</title><scriptsrc="../vue.js"></script></head><body><divid="app"><divv-for="(item,index)inlist":key="index"><pstyle="color:rgb(219,153,29);">姓名:{{item.name}}</p><pstyle="color:rgb(228,25,143);">性别:{{item.sex|sexFilter}}</p></div></div><script>letthat=null//参数varapp=newVue({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);letresultData=''that.sexOption.forEach(element=>{if(element.value==data){resultData=element.label}});returnresultData}}})</script></body></html>

回到项目中使用:


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/867.html