Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to monitor the change of input value in real time in vue.js". The explanation in this article is simple and clear and easy to learn and understand. please follow the editor's train of thought to study and learn "how to monitor the change of input value in real time in vue.js".

1. Js real-time monitoring input in vuejs 2.0

In version 2.0, vuejs combines v-el and v-ref into a single ref property, which can be called through $refs in the component instance. This means that v-el:my-element will be written like this: ref= "myElement" and v-ref:my-component will be like this: ref= "myComponent". When bound to a generic element, ref refers to the DOM element, and when bound to a component, ref is a groupware instance.

Because v-ref is no longer an instruction but a special property, it can also be defined dynamically. This is useful when combining with v-for:

Previously, v-el/v-ref and v-for were used together to produce an array of DOM or components, because each element could not be given a specific name. You can still do this now, giving each element the same ref:

Unlike in 1.x, $refs is not responsive because they are registered / updated during rendering. Only by listening for changes and rendering repeatedly can you make them respond. On the other hand, the design $refs is mainly provided for access by js programs, and it is not recommended to rely too much on it in templates. Because this means accessing the instance state outside the instance, it violates the Vue data-driven idea.

Here is an example of the vuejs2.0 version:

Input box 1: {{items.type1}} input box 2: {{items.type2}} var example1 = new Vue ({el:'# example', data: {items: {type1:' first input box', type2:' second input box'}}, ready:function () {}, watch: {items: {handler:function (val,oldval) {console.log (this.$refs.type1.value) Console.log (this.$refs.type2.value);}, deep:true}, methods: {}})

The result is shown in the figure:

When entering text in the input box, js can listen in real time to specify the value of the text in the input box.

2. Js real-time monitoring input in vuejs 1.x

So how do you listen for value changes in a given input in js in the version of vuejs 1.x?

In the following ways:

Then listen in watch in vuejs:

Watch: {items: {handler:function (val,oldval) {console.log (this.$els.texttype1.value);}, deep:true}}

Overall code:

Input box 1: {{items.type1}} input box 2: {{items.type2}} var example1 = new Vue ({el:'# example', data: {items: {type1:' first input box', type2:' second input box'}}, ready:function () {}, watch: {items: {handler:function (val,oldval) {console.log (this.$els.texttype1.value) }, deep:true}, methods: {}})

The achieved effect is shown in the figure:

Thank you for your reading. the above is the content of "how to monitor the change of input value in real time in vue.js". After the study of this article, I believe you have a deeper understanding of how to monitor the change of input value in vue.js in real time, and the specific use needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.