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

This article introduces how to achieve attribute binding and two-way data binding in Vue, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Use the data in the instance for data binding

Using v-model: bidirectional data binding

Monitoring event: watch

Vue learning

Last name:

First name:

{{fullName}}

{{count}}

New Vue ({

El: "# root"

Data: {

FirstName:''

LastName:''

Count:0

}

Computed: {

FullName:function () {

Return this.firstName +''+ this.lastName

}

}

Watch: {

FullName:function () {

This.count++

}

}

})

When full Name changes, watch listens to make the value of count + 1

The initial value of count is 0

When changing firstName, count+1

Count+1 when changing lastname

At the same time, you will see that fullName changes as the input changes, which enables two-way data binding.

On how to achieve attribute binding and two-way data binding in Vue is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.