vue中v-on指令的使用之Vue知识点归纳(四)

本文章中描述

v-on 指令的基本使用
点击按钮动态修改数据

1 简述

vue 中 v-on 指令简单点来讲，是用来给元素设置绑定事件。

格式

v-on:事件名称="方法名称"
这里的事件名称如：click 单击，dblclick 双击等等
这里的方法名称随机定义，指的是触发事件后所调用的方法这是定义的方法名称，在 vue 实例中的 methods 属性中实现。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=divice-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue v-on指令</title>
</head><body><div id="app"><!-- 直接引用 --><!-- 单击事件 --><h3 v-on:click="login"> 登录</h3><!-- 鼠标指针进入（穿过）元素时 --><h3 v-on:monseenter="login2"> 第二次登录</h3><!-- 双击事件 --><h3 v-on:dblclick="login3"> 第三登录</h3><!-- 简写方式 --><!-- 用 @ 来替换 v-on: 达到简写方式 --><h3 @click="login"> 登录</h3><h3 @monseenter="login2"> 第二次登录</h3><h3 @dblclick="login3"> 第三登录</h3></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",methods: {login:function(){alert("测试");},login2:function(){},login3:function(){}},})</script>
</body></html>

2 点击按钮更新数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=divice-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue v-on指令</title>
</head><body><div id="app"><h3 v-on:click="updateText"> 点击修改文本</h3><p> 这里是显示的文本 {{message}} </p></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {message: "哈哈 我的一个小疯子"},methods: {updateText: function () {// 在这里通过 this 关键字来引用 data 中定义的变量关键字this.message = "这里是更新后显示的文本";},},})</script>
</body></html>

效果图：

点击后：

3 程序计数器实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=divice-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue 程序计数器</title>
</head><body><div id="app"><button @click="sub">-</button>{{ count }}<button @click="add">+</button></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {count: 1,},methods: {add: function () {if (this.count < 10) {this.count++;} else {alert("不可以大于10");}},sub: function () {if (this.count > 0) {this.count--;} else {alert("不可小于0");}}},})</script>
</body></html>

4 总结

vue中v-on指令的使用之Vue知识点归纳(四)相关推荐

vue中js文件里获取this（vue实例）
vue中js文件里获取this(vue实例) 1,在main.js中抛出vue实例,在需要用到的地方引入即可 main.js里let vueThis= new Vue({el: '#app',rout ...
Vue中禁止输入表情符号指令
参考地址:vue el-input中禁止输入表情符号_笑到世界都狼狈的博客-CSDN博客_输入框禁止输入表情你知道compositionstart和compositionend吗 - 掘金 cons ...
vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用，详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
关于Vue中$nextTick的作用及实现原理(Vue进阶)
Hello,大家好,最近找工作的路途依然艰难,但是要一直保持对技术的热爱!今天继续跟大家探索一下Vue进阶的内容,这次研究一下Vue的全局API中的$nextTick,这是一个很常用,也是经典的API ...
如何实现vue中的列表动画，如何封装vue动画
文章目录一.vue中的列表动画如何实现列表动画原理: 二.vue中如何封装动画第1个版本:css动画版第2个版本: js动画版(推荐) 一.vue中的列表动画如何实现举个例子: 列表动画原理 ...
vue中开发多语言（国际化）,vue+i18n（详细教程）
目录第一步: 第二步: 第三步: 第四步: 最后: 前言:我们有时候会遇到一个项目需要支持多语言,而用直接翻译的插件时常会导致翻译的结果跟自己预想的有所偏差或者结果太长造成页面结构紊乱而这个时候就需 ...
vue中tab切换前端实现_使用vue实现tab操作
tab功能在网页中是比较常见的,那么用vue怎么实现tab操作呢,与jQuery实现tab的思路有什么区别呢? 在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的i ...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
vue中通过自定义指令将汉字转化为首字母大写、首字母小写、大写、小写的拼音
使用情景: 在文本框中输入内容,例如姓名在页面中将姓名转化为姓名的拼音,包括大写拼音.小写拼音.首字母大写拼音.大写拼音缩写.小写拼音缩写新建一个 pinyin.js 文件这是一串又臭又长的un ...

vue中v-on指令的使用之Vue知识点归纳(四)

1 简述

2 点击按钮更新数据

3 程序计数器实现

4 总结

vue中v-on指令的使用之Vue知识点归纳(四)相关推荐

最新文章

热门文章