The third day of learning Vue.js -- dynamic binding style and calculation properties
Today is the Lantern Festival. First of all, I wish everyone a happy Lantern Festival. I also wish the medical staff on the front line a happy festival. I hope the epidemic will pass soon. Come on
Following the dynamic binding class property learned yesterday, today is the dynamic binding style property. Similarly, it is also divided into array syntax and object syntax. Generally, array syntax is not widely used, so you can understand it.
- Object syntax
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="container"> <h2 v-bind:style="{fontSize:fontSize}">{{message}}</h2> </div> <script src="./vue.js"></script> <script> const app = new Vue({ el: '#container', data: { message: 'hello', fontSize: '100px' } }) </script> </body> </html>
- Array syntax
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="container"> <h1 :style='[baseStyle , baseStyles]'>{{message}}</h1> </div> <script src="./vue.js"></script> <script> const app = new Vue({ el: '#container', data: { message: 'hello', baseStyle: { background: 'red' }, baseStyles: { fontSize: '20px' }, } }) </script> </body> </html>
Today, I learned a calculation attribute called computed. It seems to have the same function as methods. In fact, there are still some differences between them. In computed, there are two methods, set and get. But we usually abbreviate them, but we still need to know that there are two things
What's the difference between computed and methods?
In the use of computed, there will be a cache in the system. When it detects that the data has not changed, computed will use the data in the cache, but methods will call the functions repeatedly, so in this regard, the performance of methods is lower than that of others.
Here are some basic examples:
set and get functions:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="container"> <h1>{{message}} {{finalName}}</h1> </div> <script src="./vue.js"></script> <script> const app = new Vue({ el: '#container', data: { message: 'hello', startName: 'real', endName: 'cute' }, computed: { finalName: { set: function(){ console.log('---'); }, get:function () { return this.startName + ' ' + this.endName; } } } }) </script> </body> </html>
Basic use:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="container"> <h1>Total price {{totalPrice}}</h1> </div> <script src="./vue.js"></script> <script> const app = new Vue({ el: '#container', data: { books: [{id:'1000',name:'Linux Programming principle',price:100}, {id:'1001',name:'php Programming principle',price:110}, {id:'1002',name:'C Programming principle',price:120}, {id:'1003',name:'Java Programming principle',price:130}] }, computed:{ //There is no verb in calculating attribute function name totalPrice:function(){ let price = 0; for(let attr in this.books){ price += this.books[attr].price } return price; } } }) </script> </body> </html>
I am lazy on the Lantern Festival. I haven't written much about it!
