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. jmeter连接oracle时未找到要求的 FROM 关键字问题

    1.jmeter的lib目录下已添加了JDBC连接oracle的驱动: 2.已在测试计划中添加了驱动文件 3.JDBC Connection Configuration配置如图 3.JDBC Requ ...

  2. tensorflow-Inception-v3模型训练自己的数据代码示例

    一.声明 本代码非原创,源网址不详,仅做学习参考. 二.代码 # -*- coding: utf-8 -*- import glob # 返回一个包含有匹配文件/目录的数组 import os.pat ...

  3. mipush ionic3 线上push

    <dict> <key>aps-environment</key> <string>production</string> </dic ...

  4. cocos creator 无法打开项目 dock栏只显示图标问题解决方法

    1.打开项目 2.找到 library和local文件夹 3.清空这两个文件夹的数据 4.问题已解决 原因: 以前生成的旧数据会和新数据发生冲突,把生成的旧数据清理掉就OK了.

  5. 全志A33驱动GT911触摸屏

    0x00 环境说明: 所使用的开发板为锐尔威视的插针版A33_Vstar 触摸屏驱动IC为GT911 接线参照开发板的TP线路 0x01 修改系统配置文件: 笔者所使用的A33开发板的系统配置文件路径 ...

  6. javascript中获取字符串或数组中元素的索引

    有些时候,我们需要知道一个字符串中字符的位置,或者一个数组中元素的位置,这是就需要对该变量进行迭代操作. 对于数组,有两个方法indexOf和findIndex() , 需要注意的是,findInde ...

  7. Python练习:小程序,列车出票程序

    # 需求:列车某结车厢座位有15行,5列,初始状态均为'有票',当乘客选了座次,下单后,变更为'已售' # 下单时,要显示所有座位的状态(有票or已售) # 下单完毕后,显示下单后的座位状态. lin ...

  8. DLG消息

    WM_GETMINMAXINFO 0X0024 WM_NCCREATE 0X0081 WM_NCCALCSIZE 0X0083   WM_CREATE 0X0001 WM_SIZE 0X0005 WM ...

  9. 《ASP.NET Core In Action》读书笔记系列四 创建ASP.NET Core 应用步骤及相应CLI命令

    一般情况下,我们都是从一个模板(template)开始创建应用的(模板:提供构建应用程序所需的基本代码).本节使用 Visual Studio 2017 .ASP.NET Core2.0和 Visua ...

  10. MyBatis探究-----核心配置文件mybatis-config.xml中配置mappers的几种方式

    1.package name="映射文件所在包名" 必须保证接口名(例如IUserDao)和xml名(IUserDao.xml)相同,还必须在同一个包中 例如:<packag ...