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

最新推荐文章于 2024-04-16 00:26:17 发布
最新推荐文章于 2024-04-16 00:26:17 发布
阅读量2.5k 收藏
点赞数 1
分类专栏： 前端框架 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43684896/article/details/84992499
版权

七亿少女的劫丨

在这里插入图片描述

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

源码：

<!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形式 例：
在这里插入图片描述

顾以南歌
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 侦听器 计算属性 axios
qq_35112578的博客
09-21 402
侦听器 axios
vue.js watch监听，vue.js 监听watch
05-03
在Vue.js中，`watch` 是一个重要的特性，用于监听数据的变化并执行相应的处理函数。在本篇文章中，我们将深入探讨Vue.js的`watch`监听机制，以及如何在实际开发中有效地使用它。 ### 1. Vue.js 的响应式原理 Vue....
vue watch监听验证码时，axios延迟发送post请求。
weixin_30367169的博客
03-07 491
标题写的全面一些，方便其他人检索，我就是找了半天找不到资料，最后自己搞定了。 原理： 每次监听到输入值变化，就打一个时间戳，然后暂停2秒再去提交post验证。 但是每次提交前，判断一下之前打的时间戳和现在时间是否大于2秒，如果大于，则真去提交post，否则return掉不执行。 以下是代码片段： data () { return { ca...
Vue中的watch如何深度监听某个对象，2024年最新阿里架构师面试题及答案
最新发布
2401_84138890的博客
04-16 471
上面代码中: 有个原则监听谁,写谁的名字,然后是对应的执行函数, 第一个参数为最新的改变值,第二个值为上一次改变的值, 注意: 除了监听 data,也可以监听**另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。
Axios 、计算属性、侦听器
weixin_44742328的博客
12-05 488
Axios 什么是Axios Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信 ，简单的讲Axios 是一个基于 promise 的 HTTP 库，就是可以发送get、post请求。说到get、post，我们原来都用Jquery。但是由于Vue、React等框架的出现，Jquery也不是那么符合现在的需求了。也正是Vue、React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了
侦听器、axios拦截器、导航守卫
SilentLand的博客
10-05 452
侦听器、axios拦截器、导航守卫
过滤器：filter 监听器：Listner AJAX 异步框架：Axios
king9991的博客
08-01 144
过滤器：filter 监听器：Listner AJAX 异步框架：Axios
Vue数据监听方法watch的使用
08-27
Vue 数据监听方法 watch 的使用是 Vue 框架中的一种重要机制，它允许开发者监视数据的变化，并在数据变化时执行特定的操作。下面是对 watch 的使用方法的详细介绍。 watch 的基本使用 watch 是一个对象，其中键是...
vue中watch和computed的区别与使用方法
10-14
在 Vue 中，`watch` 和 `computed` 都是用来处理数据变化的机制，但它们之间存在显著的差异和特定的使用场景。 **计算属性（Computed）** 计算属性是基于它们的响应式依赖进行缓存的。这意味着，当你在模板中使用一...
vue进行图片的预加载watch用法实例讲解
08-28
在Vue框架中，Computed和Watch都是用来监听数据变化的函数，但它们有着不同的使用场景。 Computed函数是用来监听多个数据的变化，然后返回一个状态值。当其中一个或多个数据发生变化时，Computed函数将重新计算整个...
Vue watch响应数据实现方法解析
10-15
首先，`watch`基本的使用方式是在Vue实例的配置对象中定义一个名为`watch`的对象，该对象的键是需要监听的数据属性，值是对应的处理函数。例如： ```javascript new Vue({ el: '#root', data: { cityName: '...
day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios
weixin_51715424的博客
09-15 560
vue 2 学习笔记
vue 监听路由变化 axios渲染
Gomeer的博客
12-19 750
vue 监听路由变化 immediate:true   //在组件初始化的时候也会执行handler处理函数 $route在这里不是函数，是对象 handle：当路由发生变化执行的操作 str中保存了路由，根据不同的路由，发起axios请求，对页面进行渲染 watch:{ $route:{ handler(){ console.log(t...
java 验证码 延迟_vue watch监听验证码时，axios延迟发送post请求。
weixin_42349978的博客
02-25 230
标题写的全面一些，方便其他人检索，我就是找了半天找不到资料，最后自己搞定了。原理：每次监听到输入值变化，就打一个时间戳，然后暂停2秒再去提交post验证。但是每次提交前，判断一下之前打的时间戳和现在时间是否大于2秒，如果大于，则真去提交post，否则return掉不执行。以下是代码片段：data () {return {captchaInputLastTime:null,}watch: {// 监...
Vue----watch 侦听器
emmmm.....
04-25 1206
文章目录1 watch 侦听器2 watch 侦听器的基本语法3 使用 watch 检测用户名是否可用安装axios出现报错：代码4 immediate 选项5 deep 选项未加deep加deep6 监听对象单个属性的变化7 计算属性 vs 侦听器 1 watch 侦听器 watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。 例如，监视用户名的变化并发起请求，判断用户名是否可用。 2 watch 侦听器的基本语法 开发者需要在 watch 节点下，定义自己的侦听器。 <te
vue中的watch监听方法
菜鸟的博客
12-26 1万+
watch在vue的文档中是这样解释的。 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性。 值是包括选项的对象：选项包括有三个。 第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。 第二个是deep：其值是true或false；确认是否深入监听。...
Vue关于watch里调用方法的坑
热门推荐
LG泪光的博客
08-02 2万+
Vue关于watch里调用方法的坑 这里是说watch调用methods里方法的时候，页面经常会报找不到方法，这个时候一定要在watch里去输出一下this，看看this包裹的壳是不是多了好多层，所以找不到方法，虽然我到现在还没理解为啥有时候会出现一层或几层壳的问题。 例如 正常情况下用this.functionname()就可以调用了。 但是在一些情况下（现在本人还没找到...
前端watch监听属性是什么意思
m0_49714202的博客
02-19 1516
定义: Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。 下面实例: 代表切换typeId属性的时候，也就是需要视图变化的功能，能点击功能发生变化的功能；我的理解就是，一般功能发生视图切换变化的，一般都需要监听一下 watch: { typeId: { handler(newval, oldval) { this.typeName = this.getNameById(newval); if (new
vue watch怎样同时监听两个值的变化并执行方法？
记得笑的博客
12-14 1万+
用computed定义一个changeData对象吧，然后再去watch changeData computed: { changeData() { const { index, columName,columData} = this return { index, columName, col...
vue中watch监听input
08-16
在Vue中，你可以通过watch来监听input输入框的变化。下面是一个示例： ```vue <template> <div> <input v-model="inputValue" type="text" /> </div> </template> <script> export default { data() { return { inputValue: '' }; }, watch: { inputValue(newValue, oldValue) { console.log('输入框的值发生了变化', newValue, oldValue); // 执行其他操作 } } }; </script> ``` 在上面的示例中，我们使用了v-model指令将输入框的值与data中的inputValue进行双向绑定。然后在watch中监听inputValue的变化，并在回调函数中执行相应的操作。 当用户在输入框中输入内容时，inputValue的值会发生变化，watch会捕捉到这个变化并执行回调函数。你可以在回调函数中编写逻辑代码，比如发送网络请求、更新相关数据等。 这样就实现了监听input输入框的变化。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值