常用指令v-on的基本用法案例

最新推荐文章于 2024-07-19 10:52:30 发布
最新推荐文章于 2024-07-19 10:52:30 发布
阅读量841 收藏
点赞数
分类专栏： Vue学习笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xm393392625/article/details/80987471
版权

一.案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用指令v-on</title>
	</head>
	<body>
		<div id="app">
			<p :style="{color:fontColor}">{{msg}}</p>
			<button v-on:click="changeContent()">改变内容</button>
			<!--缩写-->
			<button @click="changeContent()">改变内容</button>
			<button @click="changeColor()">改变颜色</button>
		</div>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			//1.创建Vue的实例
			let vm=new Vue({
				el:'#app',
				data:{
					msg:'今天适合写代码',
					fontColor:'red'
				},
				methods:{//函数实现
					changeContent(){
						if(this.msg=='今天适合写代码'){
							this.msg='明天休息';
						}else{
							this.msg='今天适合写代码';
						}
					},
					changeColor(){
						if(this.fontColor=='red'){
							this.fontColor='green';
						}else{
							this.fontColor='red';
						}
					}
				}
			});
		</script>
	</body>
</html>

二.结果


夏木炎
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue】基础系列（六）事件处理 - 绑定监听 - 事件修饰符 - 按键修饰符
YK菌的博客
01-19 2057
学习Vue事件处理
vue学习——v-on实例
练涛
10-20 889
v-on 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。 在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event属性：v-on:click="handle('ok', $even...
【Vue】`v-on` 指令详解：事件绑定与处理的全面指南
最新发布
lph159的博客
07-19 463
v-on是 Vue.js 用于事件监听的指令，可以绑定原生 DOM 事件或自定义事件。其基本语法如下：
Vuejs——（5）v-on
qq20004604的博客
09-02 4818
资料来于官方文档： http://cn.vuejs.org/guide/events.html 本文是在官方文档的基础上，更加细致的说明，代码更多更全。 简单来说，更适合新手阅读 （二十二）方法处理器 ①v-on的标准用法 用于监听DOM事件，典型的就是v-on:click，处理的方法放在methods属性里 会默认传一个参数，代码如下： 点击 methods
v-on的用法
热门推荐
我有一个梦的博客
06-28 1万+
说明 今天将介绍一下vue.js中的指令v-on的用法。 用法 v-on是用来给目标元素绑定事件的，事件的类型由参数决定。接下来，将举一个v-on用法的小例子。代码如下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g
探索 v-on 之奥秘一：事件及各类修饰符的深度剖析与案例展示
06-20
本文将深入剖析 `v-on` 的用法，特别是事件修饰符的运用，通过案例展示其强大之处。 首先，`v-on` 用于监听并响应 DOM 事件。它允许我们在 Vue 实例中定义方法，并在指定的元素上绑定这些方法作为事件处理器。例如...
Vue常用的几个指令附完整案例
10-17
以下是一些Vue常用的指令以及它们的作用和示例案例。 v-bind：用于绑定HTML属性到Vue实例的属性或表达式上。简写为“:”。例如，绑定“href”属性到实例属性“url”上，可以写成`:href="url"`。在完整语法中，`v-...
Linux常用命令和管理06-Linux文本编辑器vim基本用法1
08-08
### Linux文本编辑器vim基本用法详解 #### 一、末行模式下的行间跳转与内容定界 **vim** 是 Linux 下一款强大的文本编辑器，它支持多种模式进行编辑，包括插入模式、命令模式以及末行模式等。本文将重点介绍 **vim...
后端开发-详细教程&案例
04-19
### 后端开发教程与案例详解 #### 一、后端开发教程 ##### 1. 技术栈 - **Node.js**：基于 Chrome V8 引擎的 JavaScript 运行时环境，允许开发者在服务器端运行 JavaScript。Node.js 提供了一个轻量级且高效的...
SQL语句的基本用法案例.pdf
04-29
### SQL语句的基本用法案例知识点详解 #### 一、创建与管理数据库 - **创建数据库** - SQL命令：`CREATE DATABASE mydatabase;` - **解释**：此命令用于创建一个名为`mydatabase`的新数据库。这是管理数据库的...
v-on的使用
lzh的博客
02-04 651
v-on基础 这里，我们用一个监听按钮的点击事件，来简单看看v-on的使用 下面的代码中，我们使用了v-on:click="counter++” <div id="app"> <h2>{{counter}}</h2> <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button> </di
Vue学习笔记01day_03.跑马灯效果
xinpz的博客
09-10 311
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &amp
06v-on指令的案例
New_new_zero的博客
07-17 135
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl
v-on:属性的self修饰符案例
qq_42418169的博客
08-10 369
将self修饰符放在button按钮的外层div上，button的click事件起作用时，外层的inner并没有执行click事件 **注意：**虽然被self修饰符加持，不会被冒泡机制影响，单不代表冒泡机制会被阻止
V-on指令的使用
ADC06的博客
03-15 5230
一.V-on指令 (一) .1. v-on 的作用 用来给元素注册点击事件的 2.v-on 的语法 (1).v_on:事件名 ="事件函数" (2).v-on:click 可以简写 @click (3).v-on:mouseenter 可以简写 @mouseenter 3.v-on的注意点 (1).注册事件需要一个事件的函数 (2).创建vue实例的时候，data是用来给vue实例提供的属性（数据），不应该提供方法 （二）.案例： 代码部分如下: <div ...
v-on指令的使用
qq_44363897的博客
02-20 534
v-on指令 一、用法 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。 二、v-on语法糖：@ 三、v-on参数 当通过methods中定义方法，以供@click调用时，需要注意参数问题： 如果该方法不需要额外参数，那么方法名后的...
v-on指令
fushan2012的博客
02-22 1万+
v-on
vue基础：v-on的小练习
paradoxzl的博客
07-14 329
vue基础：v-on的小练习
v-on 案例
05-25
v-on 是 Vue.js 中用于绑定事件的指令，可以通过它将事件与组件中定义的方法进行关联。下面是一个简单的 v-on 案例： HTML： ```html <div id="app"> <button v-on:click="increment">Click me!</button> <p>{{ count }}</p> </div> ``` Vue 实例： ```javascript new Vue({ el: '#app', data: { count: 0 }, methods: { increment: function() { this.count++; } } }); ``` 在上面的例子中，我们在 `<button>` 标签上使用了 `v-on:click` 指令，将点击事件与 Vue 实例中的 `increment` 方法进行了绑定。当用户点击按钮时，就会触发 `increment` 方法，从而将 `count` 的值加一，并且这个变化会反映到页面中的 `<p>` 标签中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值