Vue原理图 – 安然的尾巴

file
Vue代码

new Vue({
    el: "#info",
    data: result,
    methods:{
        adcodes(){
        // this.show = this.show != true;
        this.show = this.show ? false : true;
        }
    }
})

网页案例

<!doctype html>
<html>
    <head>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
        <title>根据ip定位城市</title>
    </head>
    <body>
        <div id="info">
            <div>
                <span>省份</span>
                <span>{{province}}</span>
            </div>
            <div>
                <span>城市</span>
                <!-- <span>{{city}}</span> -->
                <span v-text="city"></span>
            </div>
            <button @click=adcodes()>获取城市编码</button>
            <div v-if="show">{{adcode}}</div>
        </div>
        <script type="text/javascript">
            $.ajax({
                url: "https://restapi.amap.com/v3/ip?output=json&key=dec3611ac90e3eab6024e83148b154d8",
                dataType: "JSON",
                success: function(result) {
                    result = Object.assign(result,{show:false});
                    new Vue({
                        el: "#info",
                        data: result,
                        methods:{
                            adcodes(){
                                // this.show = this.show != true;
                                this.show = this.show ? false : true;
                            }
                        }
                    })
                },
                error: function() {
                    $()
                }
            });
        </script>
    </body>
</html>