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. java-类、对象

    1.类和对象: 类是抽象的,通常不能直接使用 对象是具体的,根据类来创建对象. 2.如何定义一个类:成员变量.成员方法 成员变量:直接定义在类中,在方法外面 成员方法:去掉static 关键字,其他和 ...

  2. python GUI图形化编程-----wxpython

    一.python gui(图形化)模块介绍: Tkinter :是python最简单的图形化模块,总共只有14种组建 Pyqt     :是python最复杂也是使用最广泛的图形化 Wx       ...

  3. 温习排序算法（基于C指针）

    以前学过的数据结构课,貌似已经忘得一干二净了,偶然又翻起,书中最后一章详细介绍了7种排序算法,现在对其中4种做个总结.(为啥只总结4种,当然是因为偷懒,只想总结简单又常用的!) 先贴一张排序分类图: ...

  4. Java集合List、Set、Map

    集合是 java 基础中非常重要的一部分,同样也是 Java 面试中很重要的一个知识点.所以,给王小整理了这篇关于集合的文章. 1.接口继承关系以及实现 集合类存放于 Java.util 包中,主要有 ...

  5. allegro17.2 gerber 步骤

    1.Manufacture -> NC -> Drill Customization... 先点击 Auto generate symbols,出来对话框后点击 YES .然后在Symbo ...

  6. [LeetCode] 132. Palindrome Partitioning II_ Hard tag: Dynamic Programming

    Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...

  7. python实现可以被with上下文管理的类或函数

      # .开始之前先明确一下with机制 # 1.类包函数__enter__()和__exit__()函数,即是可以被上下文管理的类 # __enter__用来执行with时的方法,__exit__返 ...

  8. linux文件与目录的创建

    在Linux初期的学习中,是我们对基础命令的掌握,首先我们学习文件与目录的创建,分别有一些命令与选项,我们依次来看: 1:在Linux系统中,一切服务皆以文件的形式表现,脚本文件,服务配置文件,记事本 ...

  9. UnityWebRequest http post json通信

    unity3d 提供了一个用于http通信的类叫:UnityWebRequest,它是www的替代者,所以建议使用这个类.我们这个例子以json格式与服务器通信.这里使用的json组件是:Newton ...

  10. Ubuntu14.04 安装 Sublime Text 3

    Linux下安装,一种办法是从官网下载 tar.bz ,手动安装.另一种是使用apt-ge安装 这里介绍用 apt-get 自动安装方法: 1.添加sublime text 3的仓库: sudo ad ...