VueJS中{{ }}绑定值不显示，仅原样展示文本的问题求助

你的代码问题出在Vue引入方式与代码写法不匹配：你通过script标签引入的是Vue 3的全局UMD构建包（vue.global.js），这类构建会将Vue挂载为全局变量，但你却使用了ES模块的import语法，这会导致JS报错，Vue实例无法正常初始化，最终模板插值和指令都失效。

修复后的完整代码：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

<script>
// 直接使用全局暴露的Vue对象，无需import
const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')
</script>

关键修改点： #

• 移除import { createApp } from 'vue'，改用全局变量Vue.createApp创建应用实例
• 确保脚本在目标DOM元素（#app）之后执行，这样挂载时DOM已经存在

修改后重新运行npx serve，访问对应地址就能正常显示count值，点击按钮也会实现递增效果。

内容的提问来源于stack exchange，提问作者tanzeem