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

Editor to share with you how to use v-bind in vue.js, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

I. A preliminary study of v-bind

It is a vue instruction that binds the html property, as follows:

The html attribute cannot be bound with double curly braces, only the v-bind directive

.var vm = new Vue ({el:'# app', data: {title: 'title content'}})

The html here will eventually be rendered as:

The html attribute cannot be bound with double curly braces, only the v-bind directive

2. Expected value of instruction

The above kind of v-bind is also our initial understanding of the vue instruction, but in fact, the expected value of the vue instruction (for example, v-bind is the instruction, class is the parameter, and classProperty is called the "expected value" in the official document), in addition to binding a string type variable as above, it actually supports a single JavaScript expression (except v-for).

So here, we can have more choices, such as:

(1) perform operations

The html attribute cannot be bound with double curly braces, only the v-bind directive

.var vm = new Vue ({el:'# app', data: {T1: 'title1', T2:' title2'}})

The final rendered result:

The html attribute cannot be bound with double curly braces, only the v-bind directive

(2) execute functions, etc.

The html attribute cannot be bound with double curly braces, only the v-bind directive

.var vm = new Vue ({el:'# app', data: {getTitle: function () {return 'title content';})

The final rendered result:

The html attribute cannot be bound with double curly braces, only the v-bind directive

III. Supported data types

All of the above instructions are expected to be of string type data, but in fact, we know that js has a lot of data types, what if it is put into it?

(1) object type

Content

.var obj = {}; var vm = new Vue ({el:'# app', data: {obj: obj}})

Why choose the object type in the first place? The answer is that it is more representative, and the rendering result is as follows:

Content

Hey, why does this look familiar? It's kind of like. That's right! The return value of the toString method of the object! In order to verify our conjecture, we conducted further tests:

Content

.var obj = {}; obj.toString = function () {return 'edited in toStringcake;}; var vm = new Vue ({el:' # app', data: {obj: obj}})

Above, the toString method of obj has been modified (but, to be exact, it is not modified, but added. In the beginning, there is no toString method on the obj object, which inherits Object.prototype.toString, but here we execute obj.toString = function. In fact, a toString method is added to it so that when it is executed, it no longer has to call the method inherited from Object), and the rendering result is as follows:

Content

This further confirms our conjecture.

(2) Array type

The toString method of the array type is different from that of the object type in that it returns the same result as executing arr.join (','). For example, [1Jing 2Pol 3] .toString () will return "1Jet 2Pol 3". The following tests are performed:

Content

.var vm = new Vue ({el:'# app', data: {arr: [1,2,3]}})

The rendering results are as follows:

Content

It's still the same as expected.

(3) other types

Number type, toString is executed normally, including the number 0, and the result is rendered as the corresponding string.

Boolean type, true is normally rendered as the string "true", but although false executes the toString method to return the "false" string, it is not rendered.

Null / undefined type, both of which have no toString method and are not rendered.

Obviously, before executing the toString method, type checking should be done internally in vue before the output is met. And this is not a simple true / false check, because 0 is a false value, but it ends up rendering like a true value. How to implement it may need to refer to the source code of vue, which will not be delved into here.

4. Multi-html attribute value binding

A html attribute value, which may contain a lot of content, requires us to do some operations to bind multiple data to a single attribute. Here, we can consider, as before, the concatenation of strings through operation symbols such as "+". But in fact, string concatenation is troublesome, error-prone and difficult to maintain. So we can consider storing an object or array in the expected value of the instruction as before to achieve the function of binding multiple data to a single attribute.

(1) using object binding

Content

.var obj = {name: 'Dale', age: 22}; / / use the for-in loop to traverse the object properties, splicing the string obj.toString = function () {var str ='; for (var i in this) {str + = I +':'+ this [I] +';';} return str;} / / prevent the toString method itself from being traversed Object.defineProperty (obj, 'toString', {' enumerable': false}); var vm = new Vue ({el:'# app', data: {obj: obj}})

Output result:

Content

Above through the for-in loop in the toString method to get all the traverable attributes and the corresponding attribute values, and then splice them into strings and then output, you can achieve multi-attribute value binding, as for how to splice, you can carry out different implementations in the toString method.

(2) using array binding

Content

.var arr = [1,2,3]; arr.toString = function () {return this.join ('');}; var vm = new Vue ({el:'# app', data: {arr: arr}})

The rendering results are as follows:

Content

Compared to object string concatenation, array concatenation is much simpler. You can return the return value of the join method directly in the toString method. The default toString method returns the same value as the join (',').

(3) thinking

In fact, it is not uncommon to think that a html attribute binds multiple values. The most typical cases are the class and style attributes, or we are often exposed to such scenarios.

But our implementation here still seems to have a lot of problems, array binding is good, object binding, in addition to every time to rewrite the toString method, we also need to set the toString method to become inenumerable, otherwise it will be traversed in the for-in loop (in general, this is not the result we want to see), which will undoubtedly add a lot of repetitive work, and vue has taken this into account for us. It does some optimizations within the framework.

5. Vue's enhancements to class and style binding

Based on the above, vue makes some enhancements to the two html attributes, class and style. For the specific implementation of vue, please refer to its source code. Here, only the implementation method based on the above conclusion is given.

(1) object-based enhancement for class

Content

.var obj = {C1: true, c2: false, c3: null, c4: undefined}; obj.toString = function () {var str =''; for (var i in this) {if (This [I]) {str + = I +';}} return str;}; / / prevent the toString method itself from being traversed Object.defineProperty (obj, 'toString', {' enumerable': false}) Var vm = new Vue ({el:'# app', data: {obj: obj}})

Render the result:

Content

It is also for-in, unlike before, when an attribute value of obj is detected to be true, the attribute name of this attribute is added to the class of the bound element. Of course, I am only a simulation implementation here, vue actual implementation, please refer to the vue source code.

(2) enhancement of class based on array

Content

.var arr = ['C1,'c2, 'c3']; arr.toString = function () {return this.join (');}; var vm = new Vue ({el:'# app', data: {arr: arr}})

Render the result:

Content

Here is basically the same as the previous implementation idea, using join ('') implementation.

(3) object-based enhancement of style

Content

.var obj = {color: 'red', backgroundColor:' # ddd', fontSize: '20pxrabbit,}; obj.toString = function () {var str ='; for (var i in this) {if (This [I]) {str + = I +':'+ this [I] +';';}} return str;} / / prevent the toString method itself from being traversed Object.defineProperty (obj, 'toString', {' enumerable': false}); var vm = new Vue ({el:'# app', data: {obj: obj}})

Render the result:

Content

Here is basically the same as the previous implementation idea, the use of for-in with string splicing implementation.

(4) enhancement of style based on array

Content

Var arr = [{color: "red"}, {backgroundColor:'# ddd'}, {fontSize: '20px'}]; arr.toString = function () {var str =''; arr.forEach (function (val, key) {for (var i in val) {str + = I +':'+ val [I] +';';});} Var vm = new Vue ({el:'# app', data: {arr: arr}})

Render the result:

Content

Here, the array is iterated through the forEach method, and then the array elements (our style objects here) are traversed by for-in and concatenated into style strings.

The above is all the contents of the article "how to use v-bind in vue.js". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.