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

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

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

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/xie__jin__cheng/article/details/132446656

版权

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.运行结果