vue訪問頁面時自動觸發函數

本文轉載自查看原文 2020-09-26 16:10 6583 vue/ vue.js

使用 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue的watch賦值怎么觸發函數 Vue頁面加載時，觸發某個函數的方法 vue在頁面加載時觸發的函數 input內輸入值就觸發函數 Unity3D碰撞觸發函數 qt關於窗口關閉觸發函數/信號 my97datepicker實現日期改變立刻觸發函數完美定義點擊按鈕觸發函數提交數據【ajax】 .NET 寫的定時器，定時觸發函數方法 JS事件-對象監視事件，事件觸發函數