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>
相关推荐
颜进强几秒前
从零跑通一套 WorkBuddy Skill 骨架:【能跑通+代码】生成HTML报告实战
前端·后端·ai编程
data analyse 4561 分钟前
能同时统计网站App小程序的分析平台怎么选?
前端·数据分析
Bmob后端云7 分钟前
Bmob后端云备忘录项目迭代:实现笔记置顶,解决笔记列表信息杂乱问题
前端·github
OpsEye10 分钟前
从代理转发到效能分析,企业 AI 网关正在发生什么样的变化
javascript·ai编程
涛涛ing13 分钟前
2026年,前端框架开始为 AI 而生了
前端
2603_9658966218 分钟前
DOM文档对象模型|JS操作页面交互核心API
前端·javascript
骇客野人28 分钟前
Java 前后端可部署落地架构方案
服务器·前端·微服务
OpenTiny社区34 分钟前
从开发到运行:OpenTiny NEXT 如何构建 Agent 时代的 Web 应用
前端·开源·ai编程·opentiny
feixing_fx39 分钟前
伪类与伪元素的魔法:纯 CSS 打造炫酷的按钮悬停特效
前端·css·css3
动恰客流统计39 分钟前
用客流数据优化门店排班:高峰不缺人、平峰不浪费的落地路径
大数据·前端·人工智能