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.