技術標籤：前端學習版塊 vue jquery axios非同步訪問 html css

文章目錄

一、效果演示
二、完整程式碼
三、相關說明

一、效果演示

在這裡插入圖片描述

二、完整程式碼

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    < 
title>Document</title>
    <!-- 引入vue.js和axios.js和jquery.js -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" 
></script>
    <style>
        input {
            height: 30px;
            line-height: 30px;
        }

        #inputDiv {
            text-align: center;
        }

        #jbtn {
            line-height: 30px;
        }

        p {
            width: 100%;
            padding: 5px;
        } 

    </style>
</head>

<body>

    <div id="jokeDiv">
        <div id="inputDiv">
            <input type="text" placeholder="請輸入要獲取的笑話數量" id="jcount" v-model="jcount">
            <input type="button" value="獲取隨機笑話" @click="getJokes" id="jbtn">
        </div>
        <br>笑話內容:
        <hr>
        <p v-for="joke in jokes">{{joke}}</p>
    </div>
</body>
<script>
    /*
    get請求方式：
         格式1: axios.get(地址?key=value&key2=value2).then(function(response){},function(error){});
         格式2: axios.get(地址,{params:{key1:value1...}}).then(function(response){},function(error){});
    */
    /*
     介面1:隨機笑話
         請求地址:https://autumnfish.cn/api/joke/list
         請求方法:get
         請求引數:num(笑話條數,數字)
         響應內容:隨機笑話
     */
    new Vue({
        el: "#jokeDiv",
        data: {
            jcount: 1,
            jokes: [],
        },
        methods: {
            getJokes: function () {
                var t = this; //將物件先記錄下來  重要
                //傳送axios非同步請求
                axios.get("https://autumnfish.cn/api/joke/list", { params: { "num": this.jcount } }).then(
                    function (response) {
                        t.jokes = response.data.jokes; //修改該vue物件的資料
                    }, function (error) {

                    })
            }
        },
        updated() {
            //記憶體中的資料和頁面上的資料一致時，將所有p標籤的背景色修改
            var colors = ['#FFCCCC', '#FFFF99', '#FFCC99', '#CCFF99', '#CCCCCC', '#FFFFCC', '#CCCCFF', '#99CCFF'];
            var $plist = $("p")
            //console.log($plist)
            //jquery的物件方法遍歷
            $plist.each(function(index,element){
                var randomIndex = parseInt(Math.random() * colors.length);
                console.log(element)
                $(element).css("background-color", colors[randomIndex])
            })
        }
    })
</script>

</html>

三、相關說明

jquery中遍歷時不能使用for of語法，因為jquery3才開始支援for of

Vue+jQuery+axios練習小案例【隨機獲取笑話】

文章目錄

一、效果演示

二、完整程式碼

三、相關說明

Vue+jQuery+axios練習小案例【隨機獲取笑話】

Vue+Axios小案例【天氣預報查詢】

vue 使用echarts 一個小案例寬度自適應

Vue實現圖書管理小案例

Vue實現簡單購物車小案例

vue接入騰訊地圖(一)【點選事件】

VUE移動端音樂APP學習【二十一】：熱門搜尋開發

VUE移動端音樂APP學習【二十五】：歌曲列表元件開發（二）

VUE移動端音樂APP學習【二十七】：player核心的修改優化

【資料分析】小案例之確診病例資料預測(只用於理解預測演算法理解)

vue小案例

vue實現購物車的小練習

jQuery案例學習【傳送彈幕】

vue購物車小案例

Spring+SpringMVC+Mybatis+Vue+Axios+Thymeleaf整合案例

【Python小案例】星空繪畫

【Python小案例】石頭剪刀布小遊戲

【Python小案例】九九乘法表的6種方法

mysql優化小技巧之去除重複項實現方法分析【百萬級資料】

vue 對axios get pust put delete封裝的例項程式碼

Vue+jQuery+axios練習小案例【隨機獲取笑話】

文章目錄

一、效果演示

二、完整程式碼

三、相關說明

相關推薦