v-on以及v-show、v-if的一些小杂碎
v-on的参数问题：
当通过methods中定义方法，以供@click调用时，需要注意参数问题：
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去。
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<!--1.事件调用的方法没有参数-->
<button @click="btn1Click()">按钮1</button>
<button @click="btn1Click">按钮1</button> <!--2.在事件定义时, 写方法时省略了小括号, 但是方法本身是需要一个参数的, 这个时候, Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
<!--<button @click="btn2Click(123)">按钮2</button>-->
<!--<button @click="btn2Click()">按钮2</button>-->
<button @click="btn2Click">按钮2</button> <!--3.方法定义时, 我们需要event对象, 同时又需要其他参数-->
<!-- 在调用方式, 如何手动的获取到浏览器参数的event对象: $event-->
<button @click="btn3Click(abc, $event)">按钮3</button>
</div> <script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
abc: 123
},
methods: {
btn1Click() {
console.log("btn1Click");
},
btn2Click(event) {
console.log('--------', event);
},
btn3Click(abc, event) {
console.log('++++++++', abc, event);
}
}
}) // 如果函数需要参数,但是没有传入, 那么函数的形参为undefined
// function abc(name) {
// console.log(name);
// }
//
// abc()
</script> </body>
</html>
v-on的修饰符：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<!--1. .stop修饰符的使用，停止冒泡-->
<div @click="divClick">
aaaaaaa
<button @click.stop="btnClick">按钮</button>
</div> <!--2. .prevent修饰符的使用，阻止默认行为-->
<br>
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick">
</form> <!--3. .监听某个键盘的键帽-->
<input type="text" @keyup.enter="keyUp"> <!--4. .once修饰符的使用，点击回调只会触发一次-->
<button @click.once="btn2Click">按钮2</button>
</div> <script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
methods: {
btnClick() {
console.log("btnClick");
},
divClick() {
console.log("divClick");
},
submitClick() {
console.log('submitClick');
},
keyUp() {
console.log('keyUp');
},
btn2Click() {
console.log('btn2Click');
}
}
})
</script> </body>
</html>
v-show与v-if的区别：
v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
v-if当条件为false时，压根不会有对应的元素在DOM中。 v-show当条件为false时，仅仅是将元素的display属性设置为none而已。 开发中如何选择呢？ 当需要在显示与隐藏之间切片很频繁时，使用v-show。 当只有一次切换时，使用v-if。
v-on以及v-show、v-if的一些小杂碎的更多相关文章
- 证明 U and V={0}时 dim(U+V)=dim(U)+dim(V)
U And V={0} 证明 dim(U+V)=dim(U)+dim(V)设{u1,u2,...,uk} 是U的基,{v1,v2...,vr}是V的基,dim(U)=k ,dim(V)=r dim(U ...
- client version is higher than daemon version (client is v.1.29 daemon is v.1.22)
安装好coreseek,建了索引,启动了服务,用php建了一个test.php,用于测试:<?phpinclude_once('sphinxapi.php');//向搜索引擎发起请求 $cl = ...
- 操作系统中的P,V操作（转）
无论是计算机考研.计算机软件水平考试.计算机操作系统期末考试还是其他计算机岗位考试,P.V原语操作都是一个常考点.下面笔者总结了关于P.V操作的一些知识. 信号量是最早出现的用来解决进程同步与互斥问题 ...
- XVI Open Cup named after E.V. Pankratiev. GP of Peterhof
A. (a, b)-Tower 当指数大于模数的时候用欧拉定理递归计算,否则直接暴力计算. #include<cstdio> #include<algorithm> #incl ...
- XVI Open Cup named after E.V. Pankratiev. GP of Siberia
A. Passage 枚举两个点,看看删掉之后剩下的图是否是二分图. #include <bits/stdc++.h> using namespace std ; const int MA ...
- XVI Open Cup named after E.V. Pankratiev. GP of Ekaterinburg
A. Avengers, The 留坑. B. Black Widow 将所有数的所有约数插入set,然后求mex. #include<bits/stdc++.h> using names ...
- XVI Open Cup named after E.V. Pankratiev. GP of Eurasia
A. Nanoassembly 首先用叉积判断是否在指定向量右侧,然后解出法线与给定直线的交点,再关于交点对称即可. #include<bits/stdc++.h> using names ...
- XVI Open Cup named after E.V. Pankratiev. GP of SPB
A. Bubbles 枚举两个点,求出垂直平分线与$x$轴的交点,答案=交点数+1. 时间复杂度$O(n^2\log n)$. #include<cstdio> #include<a ...
- XIV Open Cup named after E.V. Pankratiev. GP of SPb
A. Bracket Expression 直接按题意模拟即可. 时间复杂度$O(n)$. #include<stdio.h> #include<algorithm> #inc ...
- XIII Open Cup named after E.V. Pankratiev. GP of Ukraine
A. Automaton 后缀自动机可以得到$O(2n+1)$个状态,但是后缀自动机会拒绝接收所有不是$S$的子串的串,所以在建立后缀自动机的时候不复制节点即可得到$n+1$个状态的DFA. #inc ...
随机推荐
- 记STM32F103C8T6+STLINK下载器在Keil中的设置
调试代码为: /************************************** * 文件名 :main.c * 描述 :获取CPU的96bit ID 和 flash的大小,并通过USAR ...
- maven私服拉取jar失败(内网)
解决方案: 1.私服没jar,找私服负责人添加 2.私服有拉不下来,重启nexus服务端(负责人做) 3.本地有jar但是idea中没找到,先执行一下reimport,不行的话,随意修改下pom文件, ...
- 九. Vuex详解
1. 理解Vuex 1.1 Vuex功能 官方解释 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用 集中式存储 管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方 ...
- 图像处理术语解释：灰度、色相、饱和度、亮度、明度、阿尔法通道、HSL、HSV、RGBA、ARGB和PRGBA以及Premultiplied Alpha（Alpha预乘）等基础概念详解
☞ ░ 前往老猿Python博文目录 ░ 一.引言 由于老猿以前没接触过图像处理,在阅读moviepy代码时,对类的有些处理方法代码看不懂是什么含义,为此花了4天时间查阅了大量资料,并加以自己的理解和 ...
- PyQt(Python+Qt)学习随笔：Qt Designer中toolBar的toolButtonStyle属性
tooButtonStyle属性保存主工具栏按钮的样式设置,用来表示工具栏按钮的文字和图标怎么显示. 该属性的可设置值类型为枚举类型Qt.ToolButtonStyle,它包含如下值: 该属性的缺省值 ...
- GPU相关资料汇总
qemu, quick emulator systemc xilinx qemu nvdla, nvidia deep learning accelerator gpgpu-sim ffgpu ope ...
- pandas 处理缺失值（连续值取平均，离散值fillna"<unk>"）
# 2.1处理缺失值,连续值用均值填充 continuous_fillna_number = [] for i in train_null_ix: if(i in continuous_ix): me ...
- MySQL（14）---Docker搭建MySQL主从复制(一主一从)
Docker搭建MySQL主从复制(一主一从) 上一篇博客写了MYSQL主从复制原理 : MySQL(13)---MYSQL主从复制原理 这篇我们来写 Docker搭建MYSQL主从复制(一主一从) ...
- vue Export2Excel 导出文件
使用需要引入这些js 在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js npm install -S file-saver 用来生成文件的web应用程序 n ...
- XJOI contest 1590
首先 热烈庆祝"CSP-S 2020全国开放赛前冲刺模拟训练题1"圆满结束!!! 感谢大毒瘤周指导的题目.题目还是很不错的,部分分设置的也比较合理,各种神仙随便 \(\text{A ...