vue练习demo4-(v-on:click)

最新推荐文章于 2024-07-30 18:00:01 发布

原创最新推荐文章于 2024-07-30 18:00:01 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何在HTML中使用Vue.js创建一个点击按钮后弹出消息的简单示例，通过展示数据绑定和方法定义的基本用法。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="sayHi">click me</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                message: '你好!'
            },
            methods: {
                sayHi: function () {
                    alert(this.message);
                }
            }
        })
    </script>
</body>
</html>