Shulou(Shulou.com)06/01 Report--

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!

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.