【Vue】vue的响应式更新 ajax请求数据不更新

最新推荐文章于 2022-05-12 09:45:59 发布

dominic_z

最新推荐文章于 2022-05-12 09:45:59 发布

阅读量918

点赞数

分类专栏： web开发

本文链接：https://blog.csdn.net/dominic_z/article/details/105268261

版权

响应式更新

下面代码就是一个最简单的vue挂载的实例，html里的{ {num}}被vue替换，加了v-cloak指令用于完成数据更新后在进行渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <style>
        [v-cloak]{
    
            display: none;
        }
    </style>
    <script>
        let content=123;
        $(function () {
    
            let d1Vue=new Vue({
    
                data:{
    
                    "num":content
                }
            });
            d1Vue.$mount("#d1");
        })
    </script>
</head>
<body>

<div id="d1" v-cloak>
    {
  {num}}
</div>

</body>
</html>

如果此时我们希望更新这个data，如下，直接修改content并不会触发视图更改。需要使用全局方法Vue.set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dominic_z

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】vue的响应式更新 ajax请求数据不更新

响应式更新下面代码就是一个最简单的vue挂载的实例，html里的{{num}}被vue替换，加了v-cloak指令用于完成数据更新后在进行渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>...
复制链接

扫一扫