1-3 过滤器

1 过滤器

自定义过滤器将王子全部替换成国王。

1-1 局部过滤器

   <div id="app">
        {{msg | formatMsg}}
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"我是王子,神奇的王子,非凡的王子"
            },
            filters:{
                formatMsg(msg){
                    var newMsg = msg.replace(/王子/g,"国王");
                    return newMsg
                }
            }
        })
    </script>js

1-2 全局过滤器

Tip:要在创建实例之前创建过滤器

        <div id="app">
        {{msg | formatMsg}}
    </div>
    <script>
        Vue.filter('formatMsg',function(msg){
            return msg.replace(/王子/g,'国王')
        })
        new Vue({
            el:"#app",
            data:{
                msg:"我是王子,神奇的王子,非凡的王子"
            }
        })
    </script>

2 nextTick

<div id="app">
        {{msg}}
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"hello world"
            },
            mounted() {
                this.$nextTick(()=>{
                    //等待DOM渲染完成后来获取vm
                    console.log(vm)
                }) 
            }
        })
    </script>