Vue+jQuery+axios练习小案例【随机获取笑话】

最新推荐文章于 2022-11-17 17:00:15 发布

迟到_啦

最新推荐文章于 2022-11-17 17:00:15 发布

阅读量456

点赞数

分类专栏：前端学习版块文章标签： vue jquery axios异步访问 html css

本文链接：https://blog.csdn.net/qq_19314763/article/details/111568720

版权

前端学习版块专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

一、效果演示
二、完整代码
三、相关说明

一、效果演示

在这里插入图片描述

二、完整代码

<!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方式发送ajax请求：
         格式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() {
                var t = this; //将对象先记录下来  重要
                //发送ajax异步请求
                axios.get("https://autumnfish.cn/api/joke/list", { params: { "num": this.jcount } }).then(
                    function (response) {
                        t.jokes = response.data.jokes; //修改该vue对象的数据
                        t.$nextTick(()=>{t.updatedColor()}) //当vue更新完DOM元素后，执行回调函数，进行背景色设置
                    }, function (error) {

                    })
            },
            updatedColor() {
                var colors = ['#FFCCCC', '#FFFF99', '#FFCC99', '#CCFF99', '#CCCCCC', '#FFFFCC', '#CCCCFF', '#99CCFF'];
                var $plist = $("p")
                //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

迟到_啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue+jQuery+axios练习小案例【随机获取笑话】

文章目录一、效果演示二、完整代码三、相关说明一、效果演示二、完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &
复制链接

扫一扫