Javascript 连接vue和js文件以显示的困难

我正在构建一个vuejs网站，我制作了一个计数按钮来增加/减少，但它没有显示

这是我为JS文件准备的

import Vue from 'vue'

// eslint-disable-next-line no-new
new Vue({
  el: '#app',
  data: {
    count: 0,
    count6: 0,
  },
  methods: {
    increment() {
      this.count += 1
    },
    decrement() {
      this.count = Math.max(0, this.count - 1)
    },
    increment6() {
      this.count6 += 1
    },
    decrement6() {
      this.count6 = Math.max(0, this.count6 - 1)
    },
  },
})

在vue文件中，我有这部分代码来显示它

    <div class="pl-20">
      <div>
        <h1 class="title text-white">How often do you fly per year?</h1>
        <div class="grid grid-cols-3 gap-4 mt-4">
          <button
            class="countbutton"
            :disabled="count === 0"
            @click="decrement"
          >
            &#8722;
          </button>
          <div class="text-white">{{ count }}</div>
          <button class="countbutton" @click="increment">&#43;</button>
        </div>
      </div>
      <div class="pt-5">
        <h1 class="title text-white">How many flights over 6 hours?</h1>
        <div class="grid grid-cols-3 gap-4 mt-4">
          <button
            class="countbutton"
            :disabled="count6 === 0"
            @click="decrement6"
          >
            &#8722;
          </button>
          <div class="text-white">{{ count6 }}</div>
          <button class="countbutton" @click="increment6">&#43;</button>
        </div>
      </div>
    </div>

你每年飞几次？
−
{{count}}
+
6小时内有多少航班？
−
{{count6}}
+

显示时，计数不能正常工作

当我检查inspect时，{{count}}没有出现

---

我只是不知道我缺少什么来连接JS和vue以使计数器正常工作

除了确定的这个问题（即，同一个计数器被使用了两次）您的HTML/Javascript没有问题。很可能您使用的构建系统设置不正确

//eslint禁用下一行无新代码
新Vue({
el:“#应用程序”，
数据：{
计数：0，
},
方法：{
增量（）{
此值为0.count+=1
},
减量{
此值为0.count-=1
},
},
})

你每年飞几次？
−
{{count}}
+
6小时内有多少航班？
−
{{count}}
+

在count函数和的帮助下，我找到了将所有内容放在VUE上的一个文件组件中的解决方案

我刚刚在vue文件中添加了此部分

<script>
export default {
  el: '#app',
  name: 'TravelOptions',
  data() {
    return {
      count: 0,
      count1: 0,
    }
  },
  methods: {
    increment() {
      this.count += 1
    },
    decrement() {
      this.count = Math.max(0, this.count - 1)
    },
    increment1() {
      this.count1 += 1
    },
    decrement1() {
      this.count1 = Math.max(0, this.count1 - 1)
    },
  },
}
</script>

导出默认值{
el:“#应用程序”，
名称：“TravelOptions”，
数据（）{
返回{
计数：0，
计数1:0，
}
},
方法：{
增量（）{
此值为0.count+=1
},
减量{
this.count=Math.max（0，this.count-1）
},
递增1（）{
这是1.count1+=1
},
递减1（）{
this.count1=Math.max（0，this.count1-1）
},
},
}

两个问题都有一个变量，单击加减，同时单击减减。您是否在问如何解决这些问题？因为JS与你的模板完全相连，你只需要对你的代码实施两个非常基本的修复。这里有一个固定版本：Hey Hey@ChrisG，非常感谢你的时间和努力，刚刚看到你做了一件了不起的事情来帮助我，但我认为我的设置有问题，不要因为我复制/粘贴了你的代码，但仍然没有显示，而且我不得不以不同的方式修复代码（只是不知道为什么），我想这是我在VScode上的vue设置，我将在这里用VScode建议我在vue文件中修复的代码进行更新，让你看看，你是说计数器按钮根本不起作用？您是否在浏览器控制台中收到任何错误消息？Hello@user3094755，谢谢您的时间，但对我来说仍然不起作用，只是不知道您在上面的代码片段中看到它起作用，并且您的代码是相同的，所以代码没有问题。您是否使用vue CLI/单文件组件构建应用程序？不，我的应用程序有多个组件，我自己基于nuxtjs和tailwind（）安装该项目，不知道这是否有帮助。因此，如果您使用nuxtjs，则它是vue单文件组件。你看过单文件组件的格式了吗？是的，我检查过了，看起来我需要将JS文件中的内容放在vue的脚本部分，谢谢，我会检查它以移动并采用正确的格式