Vue 根据接口返回值重新渲染界面

逃离我推掉我的手 2022-05-11 02:28 417阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
    </head>
    <body>
    <div id="box">
    	<input type="button" @click="get()" value="点我异步获取数据(Get)">
    	<input type="text" v-model="msg" />
    	<p>{
       { msg }}</p>
    	</div>
    
    <script type = "text/javascript">
    window.onload = function(){
    var vm = new Vue({
        el:'#box',
        data:{
            msg:'Hello World!',
        },
        methods:{
            get:function(){
                //发送get请求
                this.$http.get('/try/ajax/ajax_info.txt').then(function(res){
                    this.msg=res.body ;
    				//document.write(res.body);    
                },function(){
                    console.log('请求失败处理');
                });
            }
        }
    });
    }
    </script>
    </body>
    </html>

执行前效果:

![70][]

点击按钮执行效果

![70 1][]

脚本可以在 [http://www.runoob.com/try/try.php?filename=vue2-ajax][http_www.runoob.com_try_try.php_filename_vue2-ajax] 在线测试

动态刷新的效果 主要来自于

this.msg=res.body ;

![70 2][]

[70]: /images/20220511/838c0752dac14eceb208e5fec4e8de78.png
[70 1]: /images/20220511/13ff70cd02854eb5acb49c29a0641eae.png
[http_www.runoob.com_try_try.php_filename_vue2-ajax]: http://www.runoob.com/try/try.php?filename=vue2-ajax
[70 2]: /images/20220511/6f03138f18d348b198cdbc140ffb0c4b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，417人围观）

还没有评论，来说两句吧...

相关阅读

相关强制 Vue 重新渲染组件

有时候，依赖 vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让vue以正确的方式重新呈现

迈不过友情╰/ 2023年01月02日 13:29/ 0 赞/ 257 阅读

相关 vue修改数据页面不重新渲染

vue修改数据页面不重新渲染使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，模拟案例如下： <template> <div>

柔情只为你懂/ 2022年12月24日 04:57/ 0 赞/ 247 阅读

相关小程序数据渲染根据返回值计算百分比并且显示

wxml: <view >{ { precent + '%'}}</view> <text >{ {welfare_list

淩亂°似流年/ 2022年12月16日 13:03/ 0 赞/ 233 阅读

相关小程序根据返回值英文渲染出对应的中文

需求：后端返回值为英文，在渲染的时候，将英文所对应的中文意识渲染到前端页面。然后每种不同的状态渲染完之后给到不同的颜色进行区分。对照 NORMAL -----

╰+攻爆jí腚メ/ 2022年12月15日 03:37/ 0 赞/ 160 阅读

相关小程序根据返回值的int类型渲染不同的状态

需求：返回值里面有 0,1,2,3,4 分别代表面试，开会，拜访顾客，项目实施，其他这5中类型，需要将获取到的0,1,2,3,4渲染到页面上，分别显示所对应的类型状态面试，

拼搏现实的明天。/ 2022年10月11日 01:00/ 0 赞/ 147 阅读

相关小程序根据返回值的int类型渲染不同的状态

需求：返回值里面有 0,1,2,3,4 分别代表面试，开会，拜访顾客，项目实施，其他这5中类型，需要将获取到的0,1,2,3,4渲染到页面上，分别显示所对应的类型状态面试，

布满荆棘的人生/ 2022年10月08日 15:20/ 0 赞/ 276 阅读

相关 vue根据接口返回动态渲染组件的实现方法

vue根据接口返回动态渲染组件的实现方法使用了vue中的动态组件 [https://v3.cn.vuejs.org/guide/component-dynamic

忘是亡心i/ 2022年09月02日 12:45/ 0 赞/ 280 阅读

相关接口返回值设计

接口返回值设计(对外接口) 接口返回值概述接口设计的合理与否是非常重要的，因为对外接口是供前端使用的，一定要和前端沟通好之后达成共同约定，才能放心的设计返回值，否

古城微笑少年丶/ 2022年07月26日 04:11/ 0 赞/ 211 阅读

相关 Vue 根据接口返回值重新渲染界面

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例

逃离我推掉我的手/ 2022年05月11日 02:28/ 0 赞/ 418 阅读

相关 vue修改数据页面不重新渲染

使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，模拟案例如下： <template> <div> <div v-for="(it

迈不过友情╰/ 2021年07月26日 14:29/ 0 赞/ 891 阅读