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 ...
随机推荐
- 转：Python常见字符编码及其之间的转换
参考:Python常见字符编码 + Python常见字符编码间的转换 一.Python常见字符编码 字符编码的常用种类介绍 第一种:ASCII码 ASCII(American Standard Cod ...
- PyQt（Python+Qt）学习随笔：调用disconnect进行信号连接断开时的信号签名与断开参数的匹配要求
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在使用信号调用disconnect()方法断开信号和槽的连接时,信号可以带签名也可不带签名,参数可以 ...
- 搭建ARL资产安全灯塔
老年人了,只能靠安装部署项目混混日子这样~ 简介: 斗象TCC团队正式发布「ARL资产安全灯塔」开源版,该项目现已上线开源社区GitHub.ARL旨在快速侦察与目标关联的互联网资产,构建基础资产信息库 ...
- BUUOJ 杂项MISC（1）
爱因斯坦 下载之后解压打开是一张爱因斯坦的图片,看来是图片隐写题 使用binwalk -e misc2.jpg 获得一个有flag.txt的压缩包,但是需要密码才能打开,猜想密码在图片里面,把图片丢进 ...
- WPF中DatePiker值绑定以及精简查询
WPF中DatePiker值绑定以及精简查询 1.WPF中DatePiker值绑定 Xaml中值绑定使用Text <DatePicker Text="{Binding strMinDa ...
- 【CSP-S 2019】树的重心（重心的性质）
Description 给定一颗 \(n\) 个顶点的树 \(\text T\),共 \(n-1\) 次断边操作,每次将树分为两部分 \(\text T_1, \text T_2\),求: \[\su ...
- 【Luogu P5168】xtq玩魔塔（Kruskal 重构树 & 树状数组 & set）
Description 给定一个 \(n\) 个顶点,\(m\) 条边的无向联通图,点.边带权. 先有 \(q\) 次修改或询问,每个指令形如 \(\text{opt}\ x\ y\): \(\tex ...
- 题解-SHOI2005 树的双中心
SHOI2005 树的双中心 给树 \(T=(V,E)(|V|=n)\),树高为 \(h\),\(w_u(u\in V)\).求 \(x\in V,y\in V:\left(\sum_{u\in V} ...
- AcWing 362. 区间
听书上说有贪心 + 数据结构的做法,研究了一下. 朴素贪心 考虑把所有线段按照右端点 \(b\) 从小到大排序,依次考虑每一条线段的要求: 如果已经满足要求则跳过 否则尽量选择靠后的数(因为之后的线段 ...
- 五、Zookeeper基于API操作Node节点
安装zookeeper :linux下安装Zookeeper 3.4.14 zookeeper 分为5个包: org.apache.zookeeper //客户端主要类文件 org.apache.zo ...