vue访问页面时自动触发函数

 

使用 mounted:function () {} 访问页面时自动触发函数内容

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script src="static/js/vue.js"></script>
    <script src="static/js/axios.min.js"></script>
</head>
<body>
<div id="get_host_data">
    <button @click="GetHostData">获取数据</button>
    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <td>ID</td>
            <td>版本包</td>
            <td>md5</td>
        </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) of host_list" :key="item.pk">
                <td>{{ item.pk }}</td>
                <td>{{ item.fields.package_version }}</td>
                <td>{{ item.fields.md5_number }}</td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    new Vue({
        el:"#get_host_data",
        data: {
            host_list: []
        },
        methods:{
            GetHostData:function(){
                var url = "http://127.0.0.1:8001/super_cmdb/serverhost_list/";
                axios.get(url).then(response => {
                    if (response.data.status==0) {
                        this.host_list = response.data.message;
                        console.log(response.data.message);
                        console.log("获取机器列表成功")
                } else {
                        console.error("获取机器列表失败")
                    }
                })
            }
        },
        mounted:function () {   //自动触发写入的函数
            this.GetHostData();
        }
    })
</script>
</body>
</html>
复制代码

 

posted @   chenjianwen  阅读(13734)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
历史上的今天：
2019-09-26 python celery 异步学习
2019-09-26 python多环境切换，pyenv的使用
2016-09-26 Cacti监控服务器配置教程(基于CentOS+Nginx+MySQL+PHP环境搭建)
2016-09-26 Linux tar命令高级用法——备份数据
点击右上角即可分享
微信分享提示