vue 简单实验 v-on html事件绑定

科学的发展-只不过是读大自然写的代码

于 2023-08-23 10:21:37 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js html 前端 vue

本文链接：https://blog.youkuaiyun.com/xie__jin__cheng/article/details/132446656

博客主要展示了相关代码及运行结果，涉及Vue和HTML技术，属于前端开发领域，通过代码呈现和结果展示，可帮助了解Vue与HTML结合的应用情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.代码

<script src="https://unpkg.com/vue@next" rel="external nofollow" ></script>
<div id="event-handling">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转 Message</button>
</div>
<script>
const EventHandling = {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
}
Vue.createApp(EventHandling).mount('#event-handling')
</script>

2.运行结果