• vue filters中使用data中数据


    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>
  • 相关阅读:
    【洛谷P6835】线形生物
    【洛谷P2679】子串
    【洛谷P5072】盼君勿忘
    【洛谷P3312】数表
    【洛谷P1447】能量采集
    【洛谷P2257】YY的GCD
    【洛谷P4318】完全平方数
    【AT2300】Snuke Line
    window.showModalDialog
    js typeof
  • 原文地址:https://www.cnblogs.com/sgqwjr/p/10609569.html
Copyright © 2020-2023  润新知