vue2 在页面加载的时候 获取http数据并显示
博客专区 > mellen 的博客 > 博客详情
vue2 在页面加载的时候 获取http数据并显示
mellen 发表于8个月前
vue2 在页面加载的时候 获取http数据并显示
  • 发表于 8个月前
  • 阅读 407
  • 收藏 0
  • 点赞 1
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>post交互</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>

        </style>
        <link rel="stylesheet" href="css/mui.min.css">
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/vue.min2.2.js"></script>
        <script type="text/javascript" src="js/axios.min.js"></script>
        <script type="text/javascript" src="js/public.js"></script>

        <link href="css/mystrap.css" rel="stylesheet" type="text/css" />

        <link rel="stylesheet" type="text/css" href="css/app.css" />
    </head>


    <body>
        <div id="app" v-on:onfocus="reverseMessage()">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media" v-for="list in sites">
                    <a href="javascript:;">

                        <img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
                        <div class="mui-media-body">

                            <p class='mui-ellipsis'>{{list.Name}} {{list.Url}}</p>

                        </div>
                    </a>
                </li>
            </ul>

            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">反转字符串</button>

        </div>

        <script>
            window.onload=function(){
                //message ="";
    
            var vm = new Vue({
                el: '#app',
                data: {
                    message:"message",
                    sites:[]

                },

                methods: {
                    reverseMessage: function() {
                        var self = this;

                        axios.get('sites.php').then(function(response) {

                            self.sites = response.data.sites;
                            console.log(self.sites);

                            self.message = self.sites[1].Name;
                           console.log(sites[1].Name);
                        }).catch(function(error) {
                            console.log(error);
                        });

                    }
                }
            });
            
            vm.reverseMessage();
            
            }
        </script>
    </body>

</html>

共有 人打赏支持
粉丝 10
博文 108
码字总数 67657
作品 1
×
mellen
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: