在2.0的版本中，vuejs把v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用。这意味着 v-el:my-element将写成这样： ref="myElement"， v-ref:my-component变成了这样： ref="myComponent" 。绑定在一般元素上时，ref 指DOM元素，绑定在组件上时，ref 为一组件实例。
因为 v-ref 不再是一个指令了而是一个特殊的属性，它也可以被动态定义了。这样在和v-for 结合的时候是很有用的：
以前 v-el/v-ref 和 v-for 一起使用将产生一个DOM数组或者组件数组，因为没法给每个元素一个特定名字。现在你还仍然可以这样做，给每个元素一个同样的ref：
和 1.x 中不同， $refs 不是响应的，因为它们在渲染过程中注册/更新。只有监听变化并重复渲染才能使它们响应。另一方面，设计$refs主要是提供给 js 程序访问的，并不建议在模板中过度依赖使用它。因为这意味着在实例之外去访问实例状态，违背了 Vue 数据驱动的思想。
下面给一个vuejs2.0版本的例子：
输入框一的内容：{{items.type1}}
输入框二的内容：{{items.type2}}
var example1 = new Vue({
el: '#example',
data: {
items: {
type1:'第一个输入框',
type2:'第二个输入框'
}
},
ready:function(){
},
watch:{
items:{
handler:function(val,oldval){
console.log(this.$refs.type1.value)
console.log(this.$refs.type2.value)
},
deep:true
}
},
methods:{
}
})
结果如图所示：
当在输入框输入文字的时候，js可以实时监听其指定输入框文本的值。
二、vuejs 1.x中js实时监听input
那么在vuejs 1.x的版本中是如何在js中监听某个指定的input的value变化的呢？
通过如下方式：
然后在vuejs中的watch中监听：
watch:{
items:{
handler:function(val,oldval){
console.log(this.$els.texttype1.value)
},
deep:true
}
}
整体代码：
输入框一的内容：{{items.type1}}
输入框二的内容：{{items.type2}}
var example1 = new Vue({
el: '#example',
data: {
items: {
type1:'第一个输入框',
type2:'第二个输入框'
}
},
ready:function(){
},
watch:{
items:{
handler:function(val,oldval){
console.log(this.$els.texttype1.value)
},
deep:true
}
},
methods:{
}
})
实现的效果如图所示：
当在输入框中输入文字时，js中实时监听其变化的值。
总结
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
vue监听多个input改变
一字粗跟凉鞋
精选推荐
广告
vue监听input输入事件-oninput
10.2W阅读·12评论·13点赞
2017年5月25日
Vue：监听input值变化，延迟调用接口（节流）
369阅读·0评论·0点赞
2022年8月25日
手写迷你简单Tomcat
73阅读·0评论·0点赞
2020年11月3日
vue实现监听监听input值的变化，停止输入n秒后再去发送请求
1993阅读·0评论·0点赞
2022年3月1日
vue输入框输入触发事件_详解.vue文件中监听input输入事件（oninput）
5654阅读·0评论·0点赞
2020年12月20日
Vue(ElementUI)监听e-input输入框，完成编辑判断数据是否修改
4414阅读·0评论·3点赞
2022年7月17日
这家笔记本电脑前十名，居然只要这个价，快来抢购吧！
精选推荐
广告
Vue 监听多个input框是否都存在值
1.0W阅读·5评论·4点赞
2018年8月1日
vue监听input框值的变化
2.8W阅读·0评论·4点赞
2019年7月1日
vue如何监听多个input框_vue监听input标签的value值方法
1742阅读·0评论·0点赞
2021年3月7日
【Leetcode-算法】剑指 Offer 57. 和为s的两个数字（C++）
69阅读·0评论·0点赞
2020年9月27日
js如何返回输入两个数值的乘积_vue中两个input框输入值，自动计算总和到另一个Input框，怎么实现...
1922阅读·0评论·0点赞
2020年12月21日
vue项目中axiso的使用及封装
694阅读·0评论·0点赞
2020年10月12日
input 框中debounce_Vue.js页面中有多个input搜索框如何实现防抖操作
165阅读·0评论·0点赞
2020年12月22日
vue 同时在一个页面监听多个数据
455阅读·0评论·0点赞
2022年4月12日
Javascript 如何监听input输入框值的实时变化
4675阅读·0评论·1点赞
2022年7月26日
基于cordic ip核实现arctan
2742阅读·2评论·5点赞
2020年9月19日
JavaScript 实时监听input 中值变化
7379阅读·0评论·1点赞
2022年3月14日
如何监听多个input 的值的变化
618阅读·0评论·0点赞
2021年8月17日
vue 点击添加多个input及多个关键字
1698阅读·0评论·1点赞
2021年11月10日
Vue监听input变化
814阅读·0评论·0点赞
2019年7月28日
去首页
看看更多热门内容
以前只是在一些 mvc 、 mvvm 框架(angular、vue等)中使用 双向数据绑定 实现将文本区域中显示的内容显示在指定的区域。现在我使用原生 DOM 来模拟这种效果。首先简单设计一个简单的页面布局
然后再设置一些样式整体美化一下(入了前端的坑,有强迫症了...o_o)
样式添加好了,现在来添加js,实现我们想要的效果:
好了,这样就已经实现我们想要的效果了
实例地址
