vue filters中 this指向的不是vue实例，但想要获取vue实例中data中的数据，可以采用下面方法。在 beforeCreate中将vue实例赋值给全局变量app0，然后filters中即可通过app0获取data中数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Vue.js v2.6.10 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in list">{{item.title | model}}</li>
    </ul>
</div>
<script>
    var app0;
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                name: '',
                shop: '',
                list: [
                    {
                        title: '${name}的购物列表一,所在商城${shop}'
                    },
                    {
                        title: '${name}在${shop}的购物列表二'
                    }
                ]
            }
        },
        beforeCreate: function () {
            app0 = this;
        },
        methods: {},
        mounted: function () {
            this.$nextTick(function() {
                setTimeout(() => {
                    this.name = '张三';
                    this.shop = '家乐福';
                }, 1000)
            })
        },
        filters: {
            model: function (val) {
                return val.replace(/\$\{name\}/g, app0.name).replace(/\$\{shop\}/g, app0.shop);
            }
        }
    })
</script>
</body>
</html>

vue filters中使用data中数据的更多相关文章

  1. 对vue中的data进行数据初始化

    this.$data:是表示当前的改变后的this中的数据 this.$options.data():是表示没有赋值前的this中的数据,表示 初始化的data 一般可以使用Object.assign ...

  2. 十、Vue：Vuex实现data(){}内数据多个组件间共享

    一.概述 官方文档:https://vuex.vuejs.org/zh/installation.html 1.1vuex有什么用 Vuex:实现data(){}内数据多个组件间共享一种解决方案(类似 ...

  3. Vue beaforeCreate时获取data中的数据

    异步获取即:通过    $this.$nextTick或者settimeout,这连dom都可以拿出来 beforeCreate() { this.$nextTick(function() { con ...

  4. wex5 如何在js中给data添加数据

    var options = { defaultValues :[ {'xuetang' : xuetang,'time' : time} ] }; this.comp("xuetangDat ...

  5. VUE axios 发送 Form Data 格式数据请求

    axios 默认是 Payload 格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我们就得进行转换.Payload 和 Form Data 的主要设置是根据请求头的 C ...

  6. Vue 组件中的data数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue调用组件，组件回调给data中的数组赋值，报错Invalid prop type check failed for prop value. Expecte

    报错信息: 代码信息:调用一个tree组件,选择一些信息 <componentsTree ref="typeTreeComponent" @treeCheck="t ...

  8. 在小程序中修改上一个页面里data中的数据调用上一个页面的方法

    //获取已经打开的页面的数组 var pages = getCurrentPages(); //获取上一个页面的所有的方法和data中的数据  var lastpage = pages[pages.l ...

  9. ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决

    1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...

随机推荐

  1. Docker 实战（二）——centos7镜像安装nginx，将安装nginx的centos容器生成新的镜像，并导出

    Docker centos7镜像安装nginx 1.安装docker 使用yum安装docker不再重复:见  Linux常用命令 2.pull centos 1)在docker仓库中搜索centos ...

  2. struct与class的区别

    C++中的struct是对C中struct的扩充,它已经不再只是一个包含不同数据类型的数据结构,因为其扩充了太多功能.总的来说,C++中struct和class极其相似,比如,struct能包含成员函 ...

  3. 虚拟机中linux系统的安装教程

    虚拟机是什么? 虚拟机(Virtual Machine)是指一种特殊的软件,可以在计算机和用户之间创建一种环境,用户可以用这个软件所创建的环境来操作.虚拟机就像像真实机器一样运行程序,满足用户的需求. ...

  4. 北京大学Cousera学习笔记--8-计算导论与C语言基础--C的运算部分

    赋值运算符 1.两边类型不同:赋值时要进行类型转换,右边要转换到左边 2.长数赋值短数 最后的部分截断赋值给短数 3.短数赋给长数 数不变 4.符号位赋值 --计算机不区分符号位数字位,直接赋值 表达 ...

  5. http协议状态码及其意义

    什么是状态码? 状态码的作用是:服务器告诉客户端,发生了什么事. 在http协议中状态码出现在http response 的第一行.它会返回一个三位数的状态码和状态信息.状态码为了便于程序进行处理,而 ...

  6. xlua build时 报错处理

    error trpe 'UnityEngine.Lighr' does not contain a definiton for 'sgadowRadius' and no extension meth ...

  7. cygwin vim can't write .viminfo

    问题 每次退出vim时,都提示 vim can't wirte .viminfo 运行环境 以管理员身份登录win7,并运行cygwin 排查过程 切换到家目录,查看发现.viminfo文件存在. 查 ...

  8. Delphi调用API函数获取Windows目录信息、获取System目录信息、获取Temp临时文件目录信息

    var Str1, Str2: Array[..Max_Path]of Char;//开辟缓冲区 Str3: Array[..]of Char; begin GetWindowsDirectory(@ ...

  9. Apache Kylin学习资料

    官方文档: http://kylin.apache.org/cn/docs/tutorial/web.html kylin对接hive实现实时查询:https://www.cnblogs.com/65 ...

  10. html-webpack-plugin 遇到 throw new Error('Cyclic dependency' + nodeRep)

    今天遇到了 html-webpack-plugin 遇到 throw new Error('Cyclic dependency' + nodeRep) 错. 刚查到一篇文章,<手摸手,带你用合理 ...