vue不用双向绑定获取input中的值

最新推荐文章于 2023-04-12 14:21:07 发布
最新推荐文章于 2023-04-12 14:21:07 发布
阅读量1.1k 收藏
点赞数
分类专栏： vue 文章标签： 开发语言 vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CheriseZhou/article/details/125997010
版权

 需要引入vue.js

一、不用v-model来获取input里的value

代码如下（示例）：

<div id="app">

        <p>不用v-model获取input框的值</p>

        <input type="text" @input="changeVal">

    </div>

    <script>

        let vm = new Vue({

           el:'#app',

           data:{

             val:'',

           },

           methods: {

            changeVal(e){

                console.log(e.target.value)

            }

           },

        })

    </script>

周周不爱喝粥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决vue项目input输入框双向绑定数据不实时生效问题
11-20
这样的输入框，绑定的是data中的form对象上的phone字段。 在mounted钩子函数里边写： this.form.phone = ‘1888888888’; 这样在页面上时候不会随着输入框值改变而改变。 解决方法如下： this.$set(this.form,”...
vue取消数据双向绑定问题
qq_40908105的博客
12-03 2911
如图，由于vue数据的双向绑定，给waterSetInfo拼接单位的时候，会将res.data也进行赋值，导致waterSet里面的记过不对 解决方案： 深拷贝的方法：JSON暴力转换 解构赋值 this.waterMarkSet = JSON.parse(JSON.stringify(res.data.data)); ...
使用vue,获取input输入值(不使用双向数据绑定)，参数e的问题
沧笙踏歌的博客
05-29 2915
<input class="ItemInput" type="number" @input="firstInput"> firstInput: function(e) { console.log(e) console.log(e.target) console.log(e.target.value) console.log(e.currentTarget); } ...
vue使用输入框时，只赋值不双向绑定
蓝_蓝的博客
06-27 6095
vue使用输入框时，只赋值不双向绑定；并且单独获得输入框的值。
在vue中组件不使用v-model实现数据的双向绑定
海绵宝宝
05-28 2283
v-model相当于是value属性和input事件的语法糖，可以将一些模块封装成组件：比如说input这样有利于使用。 在父组件中的代码： <two v-model="value"></two> <div>{{ value }}</div> import two from './two'//input组件 在子组件中： <template> <div> <input type="text" :value=" valu
Web前端-Vue中给input框赋值
热门推荐
MinggeQingchun的博客
12-14 1万+
Input 输入框 通过鼠标或键盘输入字符 Input 为受控组件，它总会显示 Vue 绑定值。 通常情况下，应当处理input事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。 https://element.eleme.cn/#/zh-CN/component/input https://cn.vuejs.org/v2/guide/reactivity.html 如下： <el-input v-model="student.name">&..
【vue】element ui的el-input 输入框不能输入值
liuzhenhe1988的专栏
11-10 7055
前言 在使用element ui的el-input 输入框时，无法输入内容，后来发现是因为没有给input绑定值（v-model） 原因 Input 为受控组件，它总会显示 Vue 绑定值。（所以必须要给input绑定值v-model） 通常情况下，应当处理input事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。 不支持v-model修饰符。 参考代码 <el-input v-model="input" placeholder="...
vue怎么能不做双向绑定
weixin_42584507的博客
01-07 607
在 Vue 中，有一个特殊的选项 sync，可以用于绑定父组件的属性到子组件的 prop 上，并且在父组件的属性更新时同步更新到子组件上。 你可以使用 sync 特殊选项来替代双向绑定： // 父组件<template> <div> <input v-model="message"> <my-component :message.syn...
VUE-Table上绑定Input通过render实现双向绑定数据的示例
10-18
当用户修改`Input`的值时，`on-change`事件被触发，事件处理器会更新`params.row.numLots`，并将整个行对象赋值回`vm.data`数组的对应索引，从而实现了双向绑定。 这种实现方式的关键在于监听`Input`的`on-change`...
Vue 实现双向绑定的四种方法
08-27
Vue 框架中，双向绑定是指视图层和数据层之间的数据同步机制。使用 Vue 实现双向绑定的方法有多种，本文将介绍四种常见的方法：v-model 指令、.sync 修饰符、model 属性和 vue-better-sync 插件。 1. v-model 指令 ...
Vue循环中多个input绑定指定v-model实例
10-14
在Vue.js中，`v-model`是一个非常强大的特性，它实现了视图与数据的双向绑定，使得我们在处理用户输入时能轻松地获取和更新数据。当涉及到在循环中使用`v-model`时，通常是为了创建多个类似的表单元素，如在列表或...
剖析Vue原理&实现双向绑定MVVM
yihanzhi的博客
03-28 1378
转载自：https://segmentfault.com/a/1190000006178770 如有侵权，联系必删！ 本文能帮你做什么？ 1、了解vue的双向数据绑定原理以及核心代码模块 2、缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存...
vue自定义指令——input输入类型限制（数字、浮点、整数、英文等），解决中文输入法双向绑定失效问题
pixle的博客
11-12 5885
实现一个vue自定义指令——输入框（input,el-input）输入内容类型限制，解决中文输入法双向绑定失效问题，多种类型支持，数字类型，浮点类型、英文类型、整数类型、四则运算等。
vue项目优化之长列表性能优化(2)(Object.defineProperty)
jieweiwujie的博客
09-06 534
Object.freeze列表数据处理
Vue 四种常用获取input值的方法
04-12 6695
1. v-model 表单输入绑定 2. @input 监听输入框 3. @change 监听输入框 4. ref 获取数据
v-model --双向数据绑定
qq_45802159的博客
01-03 3184
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
如何解除编辑时的双向绑定
qq_43248604的博客
12-12 551
// 编辑 handleEdit(row){ this.qd=true this.bc=false let stringify= JSON.stringify(row); //转成字符串 this.forms =JSON.parse(stringify);//转回去 this.showDialog=true; this.addDialog = true; } ...
Element之input输入框
qq_51481048的博客
02-22 2444
注：input不支持 v-model 修饰符。 一.基础用法 <el-input v-model='input' placegolder="请输入内容"></el-input> 1.禁用状态 ------- :disabled="true" 2.可清空输入框------- clearable 3.密码框 ------ show-password 4.带icon的输入框: 可以通过prefix-icon和suffix-icon属性在 input 组...
vue3中input的双向绑定
最新发布
05-10
在Vue 3中，双向绑定已经有了一些变化。在Vue 2中，我们使用了v-model指令来实现双向数据绑定，但是在Vue 3中，v-model指令的实现有了一些变化。现在，v-model指令默认只会实现单向绑定，如果需要双向绑定，需要使用“v-model:xxx”形式的语法。 下面是一个示例，展示了如何在Vue 3中实现双向绑定： ```html <template> <div> <input v-model:title /> <p>{{ title }}</p> </div> </template> <script> import { ref } from 'vue' export default { setup() { const title = ref('') return { title } } } </script> ``` 在上面的示例中，我们使用了Vue 3中的响应式函数“ref”来创建一个title变量，并使用“v-model:title”来实现双向绑定。在输入框中输入内容时，title变量会自动更新，同时在p标签中也会显示出来。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值