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

This article is about how to use the v-bind instruction in Vue.js. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

What is the v-bind instruction

The v-bind directive is used to update the HTML property in response, allowing one or more attributes to be dynamically bound to the expression. V-bind is applied to dynamic attributes.

II. Grammar

The v-bind syntax is as follows:

V-bind: dynamic attribute name = "variable"

It can also be written in the following form:

: dynamic attribute name = "variable"

The code example is as follows:

Src and title are both here.

Tag attributes, all of which are bound to variables.

Judgment can also be used in v-bind, for example:

This means that if the value of the flag variable is true, then the value of the src attribute is the value of the variable imgUrl, otherwise the attribute value of src is the corresponding value of the variable imgUrl2.

Note: as long as it is an attribute of the HTML tag, you can bind the property value in this way.

Third, use the v-bind instruction in the class attribute

The code example is as follows:

In the class attribute, use the v-bind directive _ window.onload=function () {/ / to build the vue instance new Vue ({el: "# my", / / el is element, indicating the mounted element / / data cannot be mounted on HTML and body elements to represent data. In data, there can be various data formats data: {flag:true, varStyle: "bindStyle", and / / the value is the name of the style style1: "colorStyle" Style2: "colorStyle2"}, / / method methods: {}})} .colorStyle {color: # ff6600 } .colorStyle2 {margin-top: 10px; background-color: chartreuse; border: 1px solid blue;} .bindStyle {margin-top: 5px; color: red;} .bindStyle2 {margin-top: 5px; color: red; background-color: green } here, use v-bind to change the style and directly reference the name of the style. There is no need to define variables in data. Here, multiple style conditions are used to determine the ternary operator at the same time.

The effect picture is as follows:

Fourth, use the v-bind instruction in the style attribute

The code example is as follows:

Style example _ window.onload=function () {/ / build vue instance new Vue ({el: "# my", / / el is element, indicating the mounted element / / data cannot be mounted on HTML and body elements to represent data. Data can be in various data formats data: {flag:true,// Boolean style1: {background:'blue'}, style2: {color:'red'} Unify: "unifyStyle"}, / / method methods: {}})} .unifyStyle {margin-top: 10px } inline style single reference multiple style references using ternary operators to judge

The effect picture is as follows:

Thank you for reading! This is the end of this article on "how to use v-bind instructions in Vue.js". I hope the above content can be of some help to you, so that 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.