Nuxt.js在页面加载时运行代码

时间:2018-08-12 04:52:14

标签: vue.js vuejs2 nuxt.js

page加载Nuxt.js时如何运行代码?

如果浏览器支持使用!!window.ontouchstart的触摸事件,我想添加一个类。

我尝试了此操作,但是window未定义:

```
<section v-bind:class="{ touch: !!window.ontouchstart }">
   ...
</section>
```

1 个答案:

答案 0 :(得分:0)

您需要先添加一个eventlistener才能收听touchstart。

created: function(){
    document.addEventListener('touchstart',this.touchStart);
 }, 
destroyed: function() { 
    document.removeEventListener('touchstart', this.touchStart); 
 }

现在可以使用touch touchStart方法 内部的Vue方法。

methods:{
  touchStart(e){
    this.touched=true;
  }

}

以html

<section v-bind:class="{ touch: touched}"> ... </section>

ontouchstart也是一个尚未标准化的窗口事件, 因此,将document替换为window