如果你有一个 Vue 模板,例如:

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="changeMessage">Change Message</button>
</div>

并且对应的 Vue 实例:

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    changeMessage() {
      this.message = 'Vue is awesome!';
    }
  }
});

这段代码的输出将是一个包含一个标题和按钮的页面。初始状态下,标题会显示 "Hello, Vue!"。当点击按钮时,changeMessage 方法会被触发,将 message 数据属性更新为 "Vue is awesome!",从而使页面上的标题文字变为 "Vue is awesome!"。

这里的 Vue 模板通过双大括号 {{ message }} 实现了数据的绑定,将 Vue 实例中的 message 属性和页面上的标题进行了关联,使得标题的内容与 message 属性的值保持同步。按钮的点击事件通过 @click 监听器调用了 changeMessage 方法,实现了页面上内容的动态变化。

Was this helpful?

0 / 0

发表回复 0

Your email address will not be published.