vue获取input值的三种常用写法
作者：June.1 时间：2024-04-28 09:27:06
1. v-model 表单输入绑定
使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
<template>
<div>
<input class="login-input" type="text" v-model="username" placeholder="请输入账号">
<input class="login-input" type="password" v-model="password" placeholder="请输入密码">
<div class="login-button" @click="login" type="submit">登陆</div>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
console.log(this.username)
console.log(this.password)
}
}
}
<script/>
2. @input 监听输入框
输入框只要输入的值变化了就会触发 input 调用 search 数据实时获取通过 event.currentTarget.value 获取到
<template>
<div class="class">
<div>
<input type="text" @keyup.enter="search" @input="search($event)"/>
</div>
</div>
</template>
<script>
export default {
name: "search",
data() {
},
methods: {
search(event){
console.log(event.currentTarget.value)
}
}
}
</script>
3. ref 获取数据
这种方式类似于原生DOM,但是ref获取数据更方便
<template>
<div class="class">
<input type="text" ref="getValue" />
<button @click="subbmitButton">获取表单数据</button>
</div>
</template>
<script>
export default {
name: "page",
data() {
},
methods: {
subbmitButton(){
console.log(this.$refs.getValue.value)
}
}
}
</script>
vue收集input[type=“checkbox”]的值
input[type=“checkbox”]，勾选or不勾选
要控制input[type=“checkbox”]勾选或不勾选，有以下两种方式，
v-model="isDone"。isDone为true时，勾选；isDone为false时，不勾选:checked="isDone"。isDone为true时，勾选，isDone为false时，不勾选
注意哈！！此时isDone必须初始化为布尔值（或者可布尔化的类型，如字符串，数值，非0即1）
v-model
<body>
<div id="root">
<input type="checkbox" v-model="isDone"/>已经完成
<button @click="handleClick">勾选/去勾选</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data(){
return {
isDone:false
}
},
methods: {
handleClick(){
this.isDone = !this.isDone;
}
},
watch:{
isDone:{
immediate:true,
handler(newValue,oldValue){
console.log(newValue,oldValue);
}
}
}
})
</script>
</body>
:checked
<body>
<div id="root">
<input type="checkbox" :checked="isDone"/>已经完成
<button @click="handleClick">勾选/去勾选</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data(){
return {
isDone:false
}
},
methods: {
handleClick(){
this.isDone = !this.isDone;
}
},
watch:{
isDone:{
immediate:true,
handler(newValue,oldValue){
console.log(newValue,oldValue);
}
}
}
})
</script>
</body>
input[type=“checkbox”]多个时，哪些被选中
多个input[type="checkbox"]时，想知道哪些被选中，使用v-model，如v-model="hobbies"。
注意哈！！此时hobbies必须初始化为数组。
<body>
<div id="root">
<label><input type="checkbox" name="hobby" value="football" v-model="hobbies"/>足球</label><br/>
<label><input type="checkbox" name="hobby" value="basketball" v-model="hobbies"/>篮球</label><br/>
<label><input type="checkbox" name="hobby" value="tennis" v-model="hobbies"/>网球</label>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data(){
return {
hobbies:[]
}
},
watch:{
hobbies:{
immediate:true,
handler(newValue){
console.log(newValue);
}
}
}
})
</script>
</body>
来源：https://blog.csdn.net/qq_39043923/article/details/88688420
标签：vue,input值
0
投稿猜你喜欢
python获取指定目录下所有文件名列表的方法
2022-03-24 08:05:39
IE7下 filter:Alpha(opacity=xx) 的小问题
2008-12-02 16:24:00
用python发送微信消息
2022-04-14 07:16:55
收集前端面试题之url、href、src
2024-06-05 09:12:30
PHP获取表单所有复选框的值的方法
2024-05-13 09:24:34
Python requests接口测试实现代码
2023-09-10 18:09:21
Python实现的计数排序算法示例
2022-07-27 15:03:55
10款最佳Python开发工具推荐,每一款都是神器
2022-04-13 06:54:13
vue.js前端网页弹框异步行为示例分析
2024-04-28 09:21:58
python“静态”变量、实例变量与本地变量的声明示例
2021-11-16 23:17:28
Python PyQt5学习之自定义信号
2022-01-06 12:03:52
如何计算 tensorflow 和 pytorch 模型的浮点运算数
2023-07-17 04:20:58
vue地区选择组件教程详解
2023-07-02 16:49:48
windows系统Tensorflow2.x简单安装记录(图文)
2023-02-22 04:41:23
Django集成MongoDB实现过程解析
2022-07-10 03:32:35
Python中的异常类型及处理方式示例详解
2022-10-27 14:55:58
以实例全面讲解PHP中多进程编程的相关函数的使用
2023-10-18 12:21:55
Pyspark读取parquet数据过程解析
2022-01-21 13:33:38
在ASP中按指定参数格式化显示时间的函数。
2010-05-27 12:29:00
Python定义一个Actor任务
2022-05-30 09:24:50