代码:
<!DOCTYPE html>
<html>
<head>
<title>v-on补充</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div id="app">
<h4>1.单个传参以及多值传参</h4><hr>
<button class="btn btn-primary" @click="hello(6)">点我获取参数6</button>
<button class="btn btn-primary" @click="hello2(6,'6')">点我获取参数6以及字符串“6”</button>
<br><br><br>
<h4 >2.按下enter按钮进行提示</h4>
<hr>
<input type="text" class="form-control col-6" @keyup.enter="hello3">
</div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var 自定义 = new Vue({
el: '#app',
data: {
},
methods:{
hello:function(p1){
alert(p1)
},
hello2: function (p1,p2) {
alert(p1 + p2)
},
hello3: function () {
alert("你摁下了enter键");
}
}
})
</script>
</body>
</html>
效果:
- 实现下列效果的关键代码是
@click="hello(6)"
,传入了一个6
- 实现关键:
@click="hello2(6,'6')"
,这里是传入了一个数字6以及一个字符6.然后进行拼接。
- 这里的关键代码是:
@keyup.enter="hello3"
.注意,是keyup
,头一户写的时候写成了key
。意思就是等enter键放开的时候会执行js。