zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Object-Oriented Programming Summary Ⅱ
    Object-Oriented Programming Summary Ⅰ
    自己查与写的批量比较bash
    C#可为空引用类型 -0007
    C#类型系统 -0006
    C#类型 -0005
    C# Main方法返回值 -0004
    C# Main方法参数 -0003
    C# Main方法 -0002
    C# Hello World -0001
  • 原文地址:https://www.cnblogs.com/sgqwjr/p/10609569.html
Copyright © 2011-2022 走看看