vue 中watch监听和简单的axios请求

七亿少女的劫丨效果：源码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&amp

顾以南歌

2658人浏览 · 2018-12-13 17:45:58

顾以南歌 · 2018-12-13 17:45:58 发布

七亿少女的劫丨

在这里插入图片描述

效果：
在这里插入图片描述

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue watch监听</title>
</head>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
    div {
        margin-top: 200px;
    }
</style>
<body>
    <div id="watch-example" class="container">
        <p>
            询问一个以yes/no 回答的问题（？结尾）:
            <input v-model="question" class="btn btn-light">
        </p>
        <p>接口回答：{{ answer }}</p>
        <img :src="url" alt="">
    </div>
</body>
<script src="vue-2.5.17.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
    var watchExampleVM = new Vue({
        el: '#watch-example',
        data: {
            question: '',
            answer: '在你问我问题之前  我无法得出结果',
            url: ''
        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            question: function (newQuestion, oldQuestion) {
                this.answer = '等待键入问题...'
                this.debouncedGetAnswer()
            }
        },
        created: function () {
            this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
        },
        methods: {
            getAnswer: function () {
                if (this.question === "") {
                    this.answer = '在你问我问题之前 我无法得出结果';
                    this.url = "";
                    return
                }
                if (this.question.indexOf('?') === -1 && this.question.indexOf('？') === -1) {
                    this.answer = '问题要以问号结尾哦！'
                    return
                }
                if (this.question === "?" || this.question === "？") {
                    this.answer = '就一个? 要我怎么回答你？'
                    return
                }
                this.answer = '等我想想...'
                var vm = this
                axios.get('https://yesno.wtf/api')
                    .then(function (response) {
                        vm.answer = _.capitalize(response.data.answer);
                        vm.url = _.capitalize(response.data.image)
                    })
                    .catch(function (error) {
                        vm.answer = 'api请求失败 ' + error
                    })
            }
        }
    })
</script>

</html>

请求返回的json形式例：
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^