v-on

最新推荐文章于 2024-07-19 10:52:30 发布

高手坟墓丶

最新推荐文章于 2024-07-19 10:52:30 发布

阅读量325

点赞数

分类专栏：从零开始学vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_31070475/article/details/78475820

版权

从零开始学vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

为了与用户交互，可以用v-on指令绑定一个事件监听器，通过该监听器调用Vue实例中定义的方法：

<html>
<head>
    <title></title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <button v-on:click="reverseMessage">逆转消息</button>
    </div>
<script type="text/javascript">
     var app = new Vue({
     el: '#app',
     data: {
          msg: 'Hello Vue.js'
         },
    methods: {
        reverseMessage: function() {
            this.msg = this.msg.split('').reverse().join('');
        }
       }
    })
 </script>
</body>
</html>

注意：如果将reverseMessage方法写成箭头函数是不行的：

   reverseMessage:  () => {
            this.msg = this.msg.split('').reverse().join('');
        }

但是，可以这样写：

reverseMessage() {
            this.msg = this.msg.split('').reverse().join('');
        }

在reverseMessage方法中，我们更新了应用的状态，但是没有触碰DOM：所有的DOM操作都由Vue来处理，代码不用关注底层逻辑。

高手坟墓丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-on

为了与用户交互，可以用v-on指令绑定一个事件监听器，通过该监听器调用Vue实例中定义的方法：<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <p>{{msg}}</p> <butt
复制链接

扫一扫

专栏目录