The function of the v-bind instruction is to bind data and element attributes , and it is used frequently.
It can be bound to the properties of most components.
<div id="app">
<a v-bind:href='res.url'>{
{res.name}}</a>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
res:{
name:'百度',
url:'https://www.baidu.com'
},
}
});
</script>
This is the most basic usage of v-bind . In this case, it must be used, otherwise the a component will parse the res.url in the href attribute as a string instead of a variable .
The DOM structure parsed after adding v-bind .
The DOM structure parsed by v-bind is not added .
Because v-bind is used very frequently, it also has a shorthand , which is
<a :href='res.url'>{
{res.name}}</a>
The effect is the same.
v-bind can not only bind variables, but also bind objects.
<style>
.active {
color:#f00;
}
</style>
<div id="app">
<h3 v-bind:class="{active:isActive}">v-bind的用法</h3>
<h4 :style='{
color:Color,fontSize:fontSize + "px"}'>aaaabbbb</h4>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true,
Color:'green',
fontSize:'50'
}
});
</script>
In the h3 tag, we bind a dynamic class attribute active to it . When the value of isActive is true , the class attribute will be mounted on the label .
In the h4 tag, we give the same style of binding properties of the component dynamic property values , Color and size of fontSize can easily change , only the v-bind bound to the style attribute , it will be resolved as a dynamic variable Value, otherwise it will be parsed as a bunch of strings.
This is probably the usage of v-bind. The usage is relatively simple, but it is very practical . You will use it in many business scenarios, provided that you have enough knowledge about it.
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Follow the WeChat official account below, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials
