This is the 5th day of my participation in the August More Text Challenge

Today we’re going to look at V-bind.

It solves the problem

Assign values to attributes of HTML tags

usage

The common use of the V-bind directive to assign a value to a known attribute. Property values are dynamically obtained from JS.

<! DOCTYPE HTML > < HTML lang="en"> <head> <title>vue3 bronze to gold </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <script SRC ="/ vue3.1.5_vuue.global.js "></script> </head> <body> <div id="app"> <h3> < img v - bind: SRC = "imgUrl" / > < / h3 > < h3 > < v - bind: a href = "url" > click to binding attribute assignment < / a > < / h3 > < h3 > binding property url: < a v - bind: [attr] = "url" > click < / a > < / h3 > < h3 > splicing attr attribute + 'f' : < a v - bind: [attr + 'f'] = "url" > click < / a > < / h3 > < h3 > omit v - bind: < a: [attr + 'f'] = "url" > click < / a > < / h3 > < / div > < / body > < script > const {createApp} = Vue / / const url = 'https://blog.csdn.net/qq_28008615' const url = 'https://juejin.cn/user/3720403077840461' const attr = 'hre' const imgUrl = 'https://www.baidu.com/img/flexible/logo/pc/[email protected]' //const imgUrl = 'https://www.baidu.com/img/flexible/logo/pc/[email protected]' //const imgUrl = 'https://www.baidu.com/img/flexible/logo/pc/[email protected]' const app = { setup() { return { imgUrl, url, attr } } } createApp(app).mount('#app') </script> </html>Copy the code

The effect is as follows:

parsing

Binding picture:

Directly bind image display

Here shows the binding picture, originally wanted to bind the gold digging station result gold digging station picture seems not friendly ah, can not show. Forget it…

Click bind assign to property

Bind blog links directly. Can bind to their own blog to try, very convenient.

Other binding display

You can concatenate tag attributes, and you don’t need to write v-bind, so it looks like a good place to start. And finally, the shorthand for the V-bind directive: Yes! That’s the colon:

Today’s share here, three support balls.

Maruko this column is also good # ES6 technical principle sharing

Take in a little knowledge every day, slowly become a god, thank you.