vuejs tidak memaparkan nilai dalam {{ }}, teks dipaparkan seperti sedia ada

Question

Saya membangunkan program vuejs dan menjalankan perintah npxserve Saya pergi ke direktori itu dan menjalankan npxserve. Saya menyemak imbas http://localhost:300/myvuefile.html {{count}} di dalam butang. Kod saya:

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

<div id="app">
  <butang @klik="kira++">{{ kiraan }}</button>
</div>

<skrip>
import { createApp } daripada 'vue'

aplikasi const = createApp({
  data() {
    kembali {
      kiraan: 0
    }
  }
})

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

Saya perlu mendapatkan nilai kiraan dan apabila klik kiraan itu hendaklah ditambah. Sebaliknya, saya hanya mendapat {{count}} sebagai output. Tolong bantu untuk menyelesaikan masalah ini.

Answer 1

Berdasarkan dokumentasi- p>

Jadi, sama ada gunakan seperti ini -

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

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

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