How to listen to multiple parameters at the same time in vue
This article mainly explains "how to monitor multiple parameters at the same time in vue". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to monitor multiple parameters at the same time in vue.
How to monitor multiple parameters at the same time
Vue uses watch to listen to multiple parameters at the same time, and when any one of the parameters changes, it will be monitored that the calculation attribute computed and listening watch are needed.
Define an object data () {return {obj: {name:'xpf', gender:'male', age:24} in data
In computed: put the parameters you need to listen to into a new variable
Computed: {'newParams':function () {const {name,age} = this.obj return {name,age}
In watch: listening for new variables
Watch: {newParams:function () {alert (1)}}, the complete code watch listens to multiple attribute points at the same time I new Vue ({el:'#app', data () {return {obj: {name:'xpf') Gender:'male', age:24}, computed: {'newParams':function () {const {name,age} = this.obj return {name Age}}, watch: {newParams:function () {alert (1)}} Methods: {changeObj () {/ / this.obj.name = 'xx' this.obj.age = 21}) vue event listener, conditional judgment event listener v-on
Grammatical sugar @
1. Basic usage
Clicks {{counter}} +-const add = new Vue ({el:'#add', data: {counter:0}, methods: {add:function () {console.log ('added') This.counter++}, dec:function () {console.log ('reduced'); this.counter--})
two。 How to use event monitoring with parameters
Without arguments, when writing a function, parentheses can be written but not written
Button 1 Button 2
When you write a function with parameters, the parentheses should be written, and so should the passed parameters.
Button 2 Button 3 Button 4
That is, with parameters and with event
Button 5
Add $event in parentheses to add both parameters and event leave
3. Modifier for event object
.stop is equivalent to the stopPropagaton of the event object, preventing bubbling events
Father and son
.rooment blocks the default event preventDefault
Baidu Search
Keyup listens for a keyboard cap
.enter only listens to the enter key
.Once only listens once
Button condition judgment
Basic use of 1.v-if
{{message}} {{name}} ccc
Display for true, hide for false, set a variable isShow to control
2.v-if and v-else use
I'm your father. No, I'm your father.
The two can only show one when the variable isShow is true, else is hidden, on the contrary
3.v-if and v-else-if and v-lese use
Whether excellent or good pass or not
3 binding readability is poor, not recommended
You can encapsulate a function in computed
Computed: {result () {let num = "" if (this.message > = 90) {num = 'excellent'} else if (this.message > = 80) {num = 'good'} else {num = "fail"} return num}}
When calling, the readability is good.
Thank you for your reading, the above is the content of "how to monitor multiple parameters at the same time in vue". After the study of this article, I believe you have a deeper understanding of how to monitor multiple parameters in vue at the same time. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
