正文 

当前位置： 首页 > 问答 >

Vue v-if 使用间隔时不影响 Dom

     2023-02-23     164

关键词：

【中文标题】Vue v-if 使用间隔时不影响 Dom【英文标题】：Vue v-if not affect to Dom when using interval 【发布时间】：2019-12-04 03:53:23 【问题描述】：

我正在尝试使用 setInterval 进行轮询并使用 Vue 有条件地渲染一些元素。但它不起作用，所以我将我的数据设置为true，但在 DOM 上什么也没发生。

P.S：我使用 Vue.js 和 CDN，所以我的应用不是用 VueCLI 创建的。

这是我的 HTML：

<div id="app">
  <div class="container">
    <h1 v-if="showtext">
      text
    </h1>
  </div>
</div>

这是我的脚本。当以状态 200 响应时，我的数据将切换为 true。我可以在控制台上看到它，但我的文本没有在 DOM 上呈现。

var app = new Vue(
  el: "#app",
  data: 
    polling: null,
    showtext: false
  ,
  methods: 
    pollData() 
      this.polling = setInterval(() => 
        axios(
          method: "get",
          url: "https://jsonplaceholder.typicode.com/comments"
        ).then(function(response) 
          console.log(response);
          if (response.status == 200) 
            this.showtext = true
          
          console.log(this.showtext)
        );
      , 7000);
    
  ,
  beforeDestroy() 
    clearInterval(this.polling);
  ,
  created() 
    this.pollData();
  ,
);

【问题讨论】：

我打赌 this 在 axios 回调中是错误的。只需登录this 并查看。正如你所拥有的那样，你无法真正判断这是否是问题所在，因为你只检查你设置的内容，而不是它所附加的内容...... 【参考方案1】：

为什么我的文本没有被渲染？

因为您在控制台上看到的this.showtext 不是您的$data 对象上的那个...它是一个全局变量window.showtext，因为this 对then 的出价是window。

解决方案：

您必须将您的 vue 实例 this 绑定到您的 then ：

您可以使用：

then((response) => ) (which binds this implicitly)

或：

then((function(response)  ... ).bind(this) )

【讨论】：

【参考方案2】：

您应该使用箭头函数来访问 vue 实例范围：

 then((response)=>  ...

或将this 分配给一个全局变量，如下所示（这适用于旧浏览器）：

    var that=this; ///<------ 
  axios(
                method: "get",
                url: "https://jsonplaceholder.typicode.com/comments"
              ).then(function(response) 
                console.log(response);
                if (response.status == 200) 
                  that.showtext = true
                
                console.log(that.showtext)
              );

完整运行示例：

Vue.config.devtools = false;
Vue.config.productionTip = false;

     var app = new Vue(
        el: "#app",
        data() 
          return
          polling: null,
          showtext:false
          
        ,
        methods: 
          pollData() 
            this.polling = setInterval(() => 
              axios(
                method: "get",
                url: "https://jsonplaceholder.typicode.com/comments"
              ).then((response)=> 
               
                if (response.status == 200) 
                  this.showtext = true
                
                console.log(this.showtext)
              );
            , 4000);
          
        ,
        beforeDestroy() 
          clearInterval(this.polling);
        ,
        created() 
          this.pollData();
        ,
      );
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>
<div id="app">
      <div class="container">
      test:
        <h1 v-if="showtext">
          text
        </h1>
      </div>
    </div>

【讨论】：

【参考方案3】： 
// You have lost context in this function, use arrow function instead
.then(function(response) 
  console.log(response);
  if (response.status == 200) 
    this.showtext = true
  
  console.log(this.showtext)
);

类似这样的：

.then(response => 
  console.log(response);
  if (response.status == 200) 
    this.showtext = true
  
  console.log(this.showtext)
);

【讨论】：

谢谢它的工作。你能告诉我箭头函数有什么技巧吗？和箭头功能也可以在旧浏览器中使用？ 箭头函数在词法上绑定它们的上下文，所以this实际上是指原始上下文。 在您的情况下，您丢失了指向 Vue 实例的 this，但使用箭头函数您可以保存该上下文以访问 showtext 属性。

个人理解vue-if的使用

一.vue-if的作用以及原理动态显示DOM元素。v-if是动态的向DOM树内添加或者删除DOM元素二.vue-if的编译条件v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译。三.实例下面是vue中异步获取... 查看详情

vue中重新渲染组件的方法总结

...办法：1.可怕的方法：重新加载整个页面2.可怕的方法：使用v-if3.更好的方法：使用Vue的内置forceUpdate方法4.最好的方法：在组件上进行key更改非常不建议这样做，我们来看下一个办法。v-if指令，该指令仅在组件为true时才渲染。... 查看详情

vue--v-if&v-show

...听器和子组件2、v-show无法用于元素，也不能和v-else配合使用，而v-if可以3、v-if在切换时有更高的性能开销，而v-show在初始渲染时有更高的性能开销4、如果需要频繁切换，推荐使用v-show，如果条件在运行时改变的可能性较少，推... 查看详情

简述vue中v-if和v-show的区别

...的显示或隐藏；　　它拥有比较高的初始渲染消耗； 使用场景　　如果元素需要进行比较频繁的切换的话，推荐使用v-show，　　如果很少用到切换，或者元素可能永远都不会显示出来的话，就使用v-if 注意：如果已经在cs... 查看详情

vue里的v-show和v-if

...网页渲染性能更好，适应于频繁的操作该dom的显示隐藏。v-if: false    对应的是彻底移除dom元素，对应的是v-ifv-else，适应于一次渲染后不频繁改动dom。visibility：hidden; 不可触发绑定的事件opacity:0; 可以触... 查看详情

vue常用方法

1、v-if的使用方法。v-if不会渲染dom结构；而v-show是会渲染结构的(a):单独使用<divclass="arror"v-if="item.supports.length>2">{{item.supports.length}}个活动<iclass="iconfont">&#xe61a;</i></div>(b):和v-for 查看详情

vue.js代码优化：在dom中加一行v-if就可少写一个循环类方法

...品加到orderList数组中，然后通过展示订单列表的DOM，通过v-if来对orderList数组进行展示出来。这种作发明 查看详情

vue条件渲染(代码片段)

...元素是style:display:none;两者有这样的区别，同时v-ifelse两者使用的时候中间不能有其他的元素，否则会失效，例如在两个div中，一个div是v-if,另一个是else,在这两个div中都有input标签，当 查看详情

vue中v-if和v-show

...当表达式的值改变时把某些特殊的行为应用到DOM上。）：v-if和v-show，二者都是条件渲染：　　v-if根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素），用来控制DOM节点。类似于js中的if条件判断，后面可以跟v-e... 查看详情

vue中v-if与v-show的区别以及使用场景

...术A基于以上区别，因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属... 查看详情

vue中的v-if与v-show(代码片段)

...if有更高的切换消耗；v-show有更高的初始渲染消耗；（5）使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。 Tips：（1）如果v-show作用的元素，css文件中display:none，通过v-show进行设置不能显示该元素；原因：v-show... 查看详情

vue的v-if和v-show需要注意的问题

微信公众号：毛毛虫的小小蜡笔前言应该大家都知道v-if和v-show的区别。v-if，是有条件的渲染，当条件是true的时候，才渲染到dom节点中。当条件是false的时候，是不会渲染到dom节点中。v-show，则不管条件是否为true，都会渲染到dom... 查看详情

v-if和v-for可以一起使用吗？哪个优先级比较高？有什么影响？(代码片段)

v-for和v-if是可以一起使用的，vue官网：当同时使用时，v-if 比 v-for 优先级更高。我们并不推荐在一元素上同时使用这两个指令。官网例子：<!--这会抛出一个错误，因为属性todo此时没有在该实例上定义-->... 查看详情

【vue】vue基础知识一（本地数据操作）

...发版本的vue.is2.创建vue实例对象，设置el属性和data属性3.使用简介的模版语法把数据渲染到页面上vue实例可以使用双标签挂载，不能使用HTML和BODy来进行v-text.设置标签的文本值(覆盖标签中全部的内容el只会替换相应的值)v-html(1.内... 查看详情

vue基础之v-if和v-show的使用和特点(代码片段)

...w较好，如果在运行时条件不大可能改变v-if较好。2、代码使用<!DOCTYPEhtml><htmllang=" 查看详情

vue01----虚拟dom指令事件修饰符按键修饰符双向数据绑定v-if和v-show的区别

...sp;  内置指令        v-if        v-show        v-on----事件绑定 & 查看详情

vue2.0学习第三组条件语句

...参考菜鸟教程和官方文档编写。1.v-if在div或者之类的dom中使用v-if可以控制是否插入该dom，控制由v-if的true和false决定。如：<divid="app"><divv-if="test"></div></div><script>newVue(el:"#app",data:test:true)</script>2.v-show其... 查看详情

vue控制元素的显示和隐藏(代码片段)

 方法：使用 v-if 指令，通过动态的向DOM树内添加或者删除DOM元素的方式来显示或隐藏元素；使用v-show 指令，通过设置DOM元素的display样式属性来控制显隐。v-if 指令与 v-show 指令都可以根据值动态控制DOM元素... 查看详情