Javascript Vue-如何在v-if或组件中使用窗口对象

我试图在Vue条件内使用窗口对象：

<li v-if="window.SpeechRecognition || window.webkitSpeechRecognition">
    <a href="#">Voice</a>
</li>

---

如果用户的浏览器支持函数

SpeechRecognition

，我如何解决此错误并仅显示HTML元素？

您只能引用模板中的变量，这些变量的作用域为相关的Vue实例。警告是说您的Vue实例没有名为

window

的属性或方法（这不是您要引用的内容）

只需将Vue实例（

speechRecognition

或其他）上的数据属性设置为

v-if

语句中的值，然后引用该属性，而不是尝试从模板内部直接访问

窗口

对象（这是无法做到的）：

在Vue论坛中有帮助吗？vahdet链接了什么。解释。。。而在DOM中，作用域是“this”（组件），因此它正在尝试这样做。而不是窗口。如果我只是在数据中声明

window:window

，该怎么办？@Milano您可以这样做，但它会使

window

对象的每个属性都是被动的，这不是超级性能。

[Vue warn]: Property or method "window" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

data() {
  return {
    speechRecognition: window.SpeechRecognition || window.webkitSpeechRecognition,
  }
}

<li v-if="speechRecognition">
  <a href="#">Voice</a>
</li>