我正在用CDN在我的index.html中运行一些vue代码.我只是从一个教程学习,这是我第一次使用vue.

这是index.html

<!DOCTYPE html>
<html>
<head>
  <title>THE TITLE</title>
</head>
<body>
  <div id="app">
    {{ greeting }}
    <input v-model="greeting"/> <hr />
  </div>
  <div v-if="isVisible" class="box"></div>

  <script src='https://unpkg.com/vue'></script>
  <script src="vue.js"></script>
</body>
</html>

这是vue.js

let app = Vue.createApp({
  data: function() {
    return {
      greeting: "Hello vue3!",
      isVisible: false
    }
  }
});
app.mount("#app");

我确信vue cdn工作正常,因为v—model工作正常,但不知何故v—if不是. 我还问chatGPT,它说我没有正确导入CDN,并完全编辑了我的vue.js文件.

推荐答案

v-if#app之外.它应该是:

  <div id="app">
    {{ greeting }}
    <input v-model="greeting"/> <hr />
    <div v-if="isVisible" class="box"></div>
  </div>

Vue.js相关问答推荐

如何在Vue 3中将动态特性从主零部件同步到子零部件

Select 项目后,Vuetify v-select在select后面显示数字1

我如何使用vuejs访问彼此嵌套的json对象

Vue 3使用计算(computed)属性对象获取图像信息,在模板中呈现值时变为NaN

在Vue 2中,是否可能在不创建组件的情况下注入代码块?

使用内部方法创建计算(computed)属性是否合法?

将 v-calendar 与以时间和日期格式出现的事件一起使用

Vuetify 3 - NavBar 组件占据整个视口高度

手动触发对观察到的对象/数组的更新

VueJS CKeditor5 上传图片

如何将 vuejs 项目部署到 heroku

为什么 vue 中的 @mouseover 操作不起作用

在 v-for 的情况下如何从 v-model 输入更新 Vuex 存储

如何在某些异步数据(在 Vuex 存储中)加载之前防止任何路由?

如何在 VUE 应用中使用 sass?

找不到模块 'babel-core' 但已安装 @babel/core

Vue路由在新页面上回到顶部

无法访问函数内的数据属性

路由使用 nuxt-i18n 在 nuxt 中推送区域设置路由

组件(components)