vue绑定事件

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" value="click" v-on:click="doIt">
        <input type="button" value="简写click" @click="doIt">
        <span @click="changeName" v-text="name"></span>
        <h2>{{ name }}</h2>
    </div>

    <script src="vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                doIt: function () {
                    alert(123);
                },
                changeName: function () {
                    // console.log(this.name);
                    this.name += 'nb';
                }
            },
            data: {
                name: "ajupyter",
            }

        })
    </script>
</body>

</html>
相关推荐
BBB努力学习程序设计13 分钟前
用Bootstrap一天搞定响应式网站:前端小白的救命稻草
前端·html
嘴平伊之豬13 分钟前
跟着AI速度cli源码三-交互问答系统
前端·node.js
用户01360875668819 分钟前
前端支持的主要数据类型及其使用方式
前端
代码搬运媛25 分钟前
SOLID 原则在前端的应用
前端
lecepin41 分钟前
AI Coding 资讯 2025-11-17
前端
孟祥_成都44 分钟前
下一代组件的奥义在此!headless 组件构建思想探索!
前端·设计模式·架构
灰太狼大王灬1 小时前
Telegram 自动打包上传机器人 通过 Telegram 消息触发项目的自动打包和上传。
前端·机器人
soda_yo1 小时前
搞不懂作用域链?这篇文章让你一眼秒懂!
javascript·面试
4***14901 小时前
SpringSecurity登录成功后跳转问题
前端
小徐敲java1 小时前
window使用phpStudy在nginx部署前端测试
运维·前端·nginx