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. 了解JVM运行时的内存分配

    了解JVM运行时的内存分配 前言 上文中,在介绍运行时数据区域中的 JAVA 堆时,提到了 JVM 中的堆,一般分为三大部分:新生代.老年代.永久代,本文将进一步了解运行时的内存分配情况. 正文 1. ...

  2. subprocess.CalledProcessError: Command ‘(‘lsb_release’, ‘-a’)’ returned non-zero exit status 1.

    解决方法find / -name lsb_releaserm -rf /usr/bin/lsb_release

  3. 3.2.2 SpringMVC配置式开发

    SpringMVC配置式开发 1. SpringMVC运行原理(执行过程) 2. 需求 用户提交一个请求, 服务端处理器接收到请求后, 给出一条信息,在相应页面中显示该条信息 3. 开发步骤 (1) ...

  4. Oracle安装和配置Oracle数据库快速指南

    Oracle安装12C要求参考文档 汇总 中文版:在 Unix AIX,HP-UX,Linux,Solaris 和 MS Windows 操作系统上安装和配置 Oracle 数据库(RDBMS)的要求 ...

  5. 表情的战争(App名称)技术服务支持

    1.进入游戏走过场动画,可以点击退出跳过此过场动画: 2.进入主界面后直接点击开始游戏进入场景跑图,进入npc对话面板,对话结束进入战斗面板: 3.战斗操作方法为玩家拖动表情牌,进行攻击或者防守,直至 ...

  6. Kafka笔记6（数据传递的可靠性）

    Kafka保证分区消息的顺序,“先入先出” 只有当消息被写入分区的所有副本时,才被认为已提交的 只要有一个副本是活跃的,已提交的消息就不会丢失 消费者只能读取已经提交的消息 如果一个或多个副本在同步/ ...

  7. Leetcode: Encode and Decode TinyURL

    Note: This is a companion problem to the System Design problem: Design TinyURL. TinyURL is a URL sho ...

  8. DeleteFile 删除文件

    #include <Windows.h> #include <tchar.h> int WINAPI _tWinMain(HINSTANCE hInstance, HINSTA ...

  9. PHP 以最快的方式判断字符串是否以某给定字符串开始

    好久没搞代码了,最近找工作,重操旧业,在整理以前写的框架的时候发现,之前的自动加载部分执行速度上还是有可优化空间的,就是如果类名是以 risen\ 开始的(我的框架中的类都在此命名空间下),那么可直接 ...

  10. Linux格式化、挂载及卸载数据盘

    注意: 磁盘分区和格式化是高风险行为,请慎重操作.本文档描述如何处理一个新买的数据盘,如果您的数据盘上有数据,请务必对数据进行备份以避免可能的数据丢失. 服务器仅支持对 数据盘 进行分区,而不支持对  ...