vue学习之事件绑定

news2025/1/18 7:17:31

事件绑定

  • 创建 demo5.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>
    <!-- 1. 导入 vue 脚本文件 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <!-- DOM区域 -->
    <div id="app">
        <h3>count value: {{count}}</h3>
        <!-- v-on: vue事件函数 -->
        <button v-on:click="addCount">+1</button>
        <!-- js 事件函数  -->
        <button @click="count+=1">+1</button>
    </div>

</body>
<script>
    const vm = {
        data: function() {
            return {
                count: 0,
            }

        },
        methods: {
            addCount() {
                this.count += 1
            },
        },
    }
    const app = Vue.createApp(vm)
    app.mount('#app')
</script>

</html>

效果展示

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/997804.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

手写Mybatis框架

手写Mybatis框架

Mybatis核心配置文件就是为了配置Configration 因此要首先会解析Mybatis核心配置文件 首先使用dom4J解析Mybatis核心配置文件 新建模块演示dom4j解析.xml 目录放错了 无所谓 引入依赖 从原来项目可以拷贝过来 就些简单配置就好 解析核心配置文件和解析xxxMapper.xml映射文件…
阅读更多...
《React vs. Vue vs. Angular：2023年的全面比较》

《React vs. Vue vs. Angular：2023年的全面比较》

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…
阅读更多...
如何快速下载UE源码

如何快速下载UE源码

前置技能要求掌握Git和Github的基础操作和知识 1.获取源码仓库授权并下载源代码 (1).获取授权 UE是开源的&#xff0c;但是它的代码仓库在Github不开源&#xff0c;我们没法直接搜索到&#xff0c; 登录->个人信息->应用与账户->连接Github 请按照官网指引成功进…
阅读更多...
想要精通算法和SQL的成长之路 - 课程表III

想要精通算法和SQL的成长之路 - 课程表III

想要精通算法和SQL的成长之路 - 课程表III 前言一. 课程表III&#xff08;贪心优先队列&#xff09;1.1 优先选择截止时间更小的课程1.2 如果当前课程无法学习怎么办&#xff1f;1.3 优化 前言 想要精通算法和SQL的成长之路 - 系列导航 一. 课程表III&#xff08;贪心优先队列&…
阅读更多...
【ArcGIS pro】-使用arcpy一次保存多个布局

【ArcGIS pro】-使用arcpy一次保存多个布局

在arcgis Pro中常常会创建多个地图和多个布局&#xff0c;本文介绍如何使用代码&#xff0c;一次保存多个布局文件 在arcgis pro中打开python视图 找到工程位置 在python视图中输入如下代码 保存为pdf import arcpy# 设置当前项目&#xff0c;这通常是一个.aprx文件 projec…
阅读更多...
11.Xaml DatePicker控件 时间控件

11.Xaml DatePicker控件 时间控件

1.运行效果 2.运行源码 a.Xaml源码 <Grid Name="Grid1"><!--DisplayDate="2020-5-1" 显示的日期--><!--DisplayDateStart="2020
阅读更多...
Linux CentOS7 添加中文输入法

Linux CentOS7 添加中文输入法

在安装CentOS7时&#xff0c;现在默认安装了桌面中文系统。可以切换为英文&#xff0c;中英文可以按要求随时更换。而在CentOS7桌面环境下&#xff0c;显示中文非常方便、正确&#xff0c;并不能录入中文。 在远程登录系统的情况下&#xff0c;不论是系统语言&#xff08;LANG…
阅读更多...
Vue2电商前台项目——完成Home首页模块业务

Vue2电商前台项目——完成Home首页模块业务

Vue2电商前台项目——完成Home首页模块业务 Vue基础知识点击此处——Vue.js 文章目录 Vue2电商前台项目——完成Home首页模块业务一、项目开发的步骤二、Home首页拆分静态组件1、完成TypeNav三级联动组件&#xff1a;全局组件2、完成其余静态组件&#xff1a;局部组件 三、请求…
阅读更多...
黑马JVM总结（四）

黑马JVM总结（四）

&#xff08;1&#xff09;本地方法栈 Java虚拟机调用本地方法时&#xff0c;给本地方法提供的一个内存空间&#xff0c;本地方法它是指哪些不是由java代码编写的方法 java代码有一定限制&#xff0c;它有时候不能直接跟操作系统底层打交道&#xff0c;需要用c和c语言编写的本…
阅读更多...
《C和指针》笔记23: 指针的指针

《C和指针》笔记23: 指针的指针

int a 12; int *b &a;现在有了第三个变量c c &b;c的类型是什么&#xff1f;显然它是一个指针&#xff0c;但它所指向的是什么&#xff1f;变量b是一个“指向整型的指针”&#xff0c;所以任何指向b的类型必须是指向“指向整型的指针”的指针&#xff0c;更通俗地说…
阅读更多...
D. Paths on the Tree

D. Paths on the Tree

Problem - 1746D - Codeforces 思路&#xff1a;先分析一下题意&#xff0c;根据第一条性质&#xff0c;每次只能够从1开始&#xff0c;而第二条性质则表明对于每个节点来说&#xff0c;经过这个节点的子节点的路径条数应该尽量均衡&#xff0c;最大值与最小值相差不能超过1&am…
阅读更多...
水浒传之“领导力的定义：梁山集团三代领导人的特点”

水浒传之“领导力的定义：梁山集团三代领导人的特点”

周末快乐&#xff0c;我是老原。 周末修整&#xff0c;也不要忘记给自己的大脑充个电。 最近空闲时间看《水浒传》&#xff0c;有了一些关于领导力的感悟。 一提到领导力&#xff0c;有人可能会认为&#xff0c;这是企业领导才需要掌握的能力。 其实并不是。 领导力可以体…
阅读更多...
liunx系统无sudo或管理员权限安装rar解压安装包

liunx系统无sudo或管理员权限安装rar解压安装包

liunx无sudo权限安装rar解压安装包 &#xff08;1&#xff09;正常liunx安装rar&#xff08;2&#xff09;无sudo\root(管理员身份)时如何安装rar &#xff08;1&#xff09;正常liunx安装rar 1、下载安装包 WinRAR archiver, a powerful tool to process RAR and ZIP files (r…
阅读更多...
C#类与类库调用注意事项

C#类与类库调用注意事项

类 创建一个类文件&#xff0c;myfunction.cs //静态类&#xff1a;直接引用、无需实例化 static public int jiafa(int V) //普通类&#xff1a;引用时需要实例化 public int jiafa(int V)using System; using System.Collections.Generic; using System.Diagnostics; using …
阅读更多...
VS Code 配置 JAVA（总）

VS Code 配置 JAVA（总）

VS Code 配置 JAVA&#xff08;总&#xff09; 主要参考&#xff1a; 处理单独 java 源文件的vscode配置VScode关于 java 配置的总体说明安装多版本 jdk 后&#xff0c;如何指定使用某个版本&#xff1f;某些与java相关的有用扩展VS code 如何配置不同编程语言及其工作流程 …
阅读更多...
运维必备 | 使用 ansible 自动化批量执行工具，提升企业运维工作效率

运维必备 | 使用 ansible 自动化批量执行工具，提升企业运维工作效率

各位亲爱的读者&#xff0c;现在公众号更改了推送规则&#xff0c;如果您需要第一时间看到我们推送的好内容。 一定要记得给公众号星标&#xff0c;经常点赞、在看、转发、分享和留下您的评论 &#xff01; 关注回复【学习交流群】加入【安全开发运维】答疑交流群 请朋友们【多…
阅读更多...
买卖股票的最佳时机含冷冻期

买卖股票的最佳时机含冷冻期

题目链接 买卖股票的最佳时机含冷冻期 题目描述 注意点 卖出股票后&#xff0c;无法在第二天买入股票 (即冷冻期为 1 天)不能同时参与多笔交易&#xff08;必须在再次购买前出售掉之前的股票&#xff09;可以尽可能地完成更多的交易&#xff08;多次买卖一支股票&#xff09…
阅读更多...
l8-d11 TCP连接管理与UDP协议

l8-d11 TCP连接管理与UDP协议

一、三次握手 TCP 建立连接的过程叫做握手。 采用三报文握手&#xff1a;在客户和服务器之间交换三个 TCP 报文段&#xff0c;以防止已失效的连接请求报文段突然又传送到了&#xff0c;因而产生 TCP 连接建立错误。 二、四次挥手 TCP 连接释放过程比较复杂。 数据传输结束后…
阅读更多...
2、k-means聚类算法sklearn与手动实现

2、k-means聚类算法sklearn与手动实现

本文将对k-means聚类算法原理和实现过程进行简述 算法原理 k-means算法原理较简单&#xff0c;基本步骤如下&#xff1a; 1、假定我们要对N个样本观测做聚类&#xff0c;要求聚为K类&#xff0c;首先选择K个点作为初始中心点&#xff1b; 2、接下来&#xff0c;按照距离初始中…
阅读更多...
蓝桥杯官网填空题（三角形的面积）

蓝桥杯官网填空题（三角形的面积）

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 已知三角形三个顶点在直角坐标系下的坐标分别为&#xff1a; txt (2.3, 2.5) (6.4, 3.1) (5.1, 7.2) txt 求该三角形的面积。 注意&#xff0c;要提交的是一个小…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023