What does v-bind mean in vue.js

[v-bind] in vue.js is used to bind multiple attribute values, or create props values ​​like a component. [v-bind] has a corresponding syntactic sugar, which is an abbreviation. , which is conducive to concise syntax.

The operating environment of this tutorial: windows10 system, vue2.9, this article is applicable to all brands of computers.

【Recommended related articles: vue.js】

Introduction to v-bind

We studied earlier The main function of the directive is to insert values ​​into the content of our template.

However, in addition to the content needing to be determined dynamically, we also want to bind certain attributes dynamically.

• For example, dynamically binding the href attribute of the a element

• For example, dynamically binding the src attribute of the img element

At this time, we can use v-bind to specify:

• Function: dynamically bind attributes

• Abbreviation::

• Expected: any(with argument) | object (whitout argument)

• Parameter: attrOrProp(option)

v-bind basics

v-bind is used to bind multiple attribute values, or create props values ​​like a component (we will introduce this when we learn about components)

In development, what properties need to be dynamically bound?

For example, picture links (src), website links (href), dynamic binding of some classes, styles, etc.

For example, through data binding in the Vue instance To determine the src and href of the element, the code is as follows

<div id="app">
    <a v-bind:href="link">Vuejs官网</a>
    <img v-bind:src="logoUrl" alt=""/>
    
    <!-- 当然也可以通过语法糖“:”缩写v-bind -->
    <!-- <img :src="logoUrl" alt=""/> -->
</div>
<script src="/vue.js"></script>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            logoUrl:"http://vuejs.org/images/logo.png",
            link:"https://vuejs.org"
        }
    })
</script>

v-bind syntax sugar

v-bind has a corresponding syntax sugar, which is the abbreviation

In development, we usually use the form of syntactic sugar because it is more concise.

The abbreviation is as follows:

<div id="app">
    <a :href="link">Vuejs官网</a>
    <img :src="logoUrl" alt=""/>
</div>

v-bind binding class

Many times, we want to switch classes dynamically, such as:

• When the data is in a certain state, the font displays red.

• When the data is in another state, the font appears black.

There are two ways to bind class:

• Object syntax

• Array syntax

The meaning of object syntax is: class followed by an object.

Object syntax has the following usages:

用法一：直接通过{}绑定一个类
<h2 :class="{active:isActive}">Hello world</h2>
用法二：也可以通过判断，传入多个值
<h2 :class="{active:isActive,line:isLine}">Hello world</2>  
用法三：和普通的类同时存在，并不冲突
注：如果isActive和IsLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{active:isActive,line:isLine}">Hello world</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello world</h2>

Demo: Click the button to switch the font color

...
<style>
    .active{
        color:red;
    }    
</style
...
<div id="app">
<h1 v-bind:class="{active:isActive}">{{message}}</h1>
<button v-on:click="buttonClick()">颜色切换</button>
</div>
<script>
const vue = new Vue({
el: &#39;#app&#39;,
data: {
message: &#39;hello world&#39;,
isActive:true
},
methods:{
buttonClick:function(){
this.isActive = !this.isActive;
}
}
})
</script>

The meaning of the array syntax is: class followed by an array.

Array syntax has the following usages (array syntax is generally used less often):

用法一：直接通过[]绑定一个类
<h2 :class="[active]">Hello world</h2>
用法二：也可以传入多个值
<h2 :class="[active,line]">Hello world</2>
用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class="[active,line]">Hello world</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello world</h2>

Demo:

... 
<style>
.active{
color: red;
}
.line{
font-size: 50px;
}
.common{
color:green;
}
</style>
...
<div id="app">
    <!-- 如果加了单引号用的就是style中的指定class，如果没有单引号用的就是vue对象中的active变量 -->
    <!-- 注：这里，下面三个类将共存-->
<h2 class="common" :class="[&#39;active&#39;,line]">Hello world</h2>
</div>
<script>
const vue = new Vue({
el: &#39;#app&#39;,
data: {
line:&#39;line&#39;
}
})
</script>

v-bind binding style

We can use v-bind:style to bind some CSS inline styles

When writing CSS property names, such as font-size

• We can use cameCase: fontSize

• or dash separated (kebab-case, remember to use single quotes) 'font-size'

There are two ways to bind class:

• Object syntax

• Array syntax

The meaning of object syntax is style followed by an object type

<!-- 对象key是CSS属性名称 -->
<!-- 对象value是具体赋的值，值可以来自于data中的属性 -->
:style="{coloc:currentColor,fontsize:fontsize+&#39;px&#39;}"

The meaning of array syntax is style What follows is an array type

<!-- 多个值以，分割即可-->
<div v-bind:style="[baseStyles,overridingStyles]"></div>

Demo:

<div id="app">
<!-- 通过对象绑定style行内样式，值如果为字符串，那么将直接显示样式值 -->
<!-- <h1 :style="{color:&#39;red&#39;}">{{message}}</h1> -->
<!-- 通过变量来绑定行内样式表 -->
<!-- <h1 :style="{color:color}">{{message}}</h1> -->
<!-- 通过方法来绑定样式 -->
<!-- <h1 :style="getStyle()">{{message}}</h1> -->
<!-- 通过数组来绑定样式 -->
<h1 :style="[common,bgColor]">{{message}}</h1>
</div>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
message: "hello world",
color: &#39;red&#39;,
common:{color:&#39;blue&#39;,fontSize:&#39;10px&#39;},
bgColor:{backgroundColor:&#39;black&#39;}
},
methods: {
getStyle: function() {
return {
color: this.color
};
}
}
})
</script>

Related free learning recommendations: javascript (video)

The above is the detailed content of What does v-bind mean in vue.js. For more information, please follow other related articles on the PHP Chinese website!