Analysis of use cases of V-bind directive in VueJs

This time I will bring you an analysis of the use cases of the V-bind instruction in VueJs. What are the precautions for using the V-bind instruction in VueJs. The following is a practical case, let's take a look.

Introduction

v-bind is mainly used for attribute binding. Vue officially provides an abbreviation: bind, for example:

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

1. Overview

v-bind is mainly used for attribute binding, such as your class attribute, style attribute, value attribute, href attribute, etc. Etc., as long as it is an attribute, it can be bound using the v-bind directive.

Example:

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="&#39;/path/to/images/&#39; + fileName">
<!-- class 绑定 -->
<p :class="{ red: isRed }"></p>
<p :class="[classA, classB]"></p>
<p :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<p :style="{ fontSize: size + &#39;px&#39; }"></p>
<p :style="[styleObjectA, styleObjectB]"></p>
<!-- 绑定一个有属性的对象 -->
<p v-bind="{ id: someProp, &#39;other-attr&#39;: otherProp }"></p>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<p v-bind:text-content.prop="text"></p>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

2. Binding HTML Class

Object syntax

We can pass Give v-bind:class an object to dynamically switch classes

<p v-bind:class="{ active: isActive }"></p>

The above syntax indicates active. Whether this class exists or not will depend on the truthiness of the data attribute isActive

You can change the class in the object Pass in more attributes to dynamically switch between multiple classes. Additionally, the v-bind:class directive can also coexist with the normal class attribute. When there is the following template:

<p class="static"
  v-bind:class="{ active: isActive, &#39;text-danger&#39;: hasError }">
</p>
  和如下 data
data: {
 isActive: true,
 hasError: false
}

The result is rendered as:

<p class="static active"></p>

When isActive or hasError changes, the class list will be updated accordingly. For example, if the value of hasError is true, the class list will become "static active text-danger"

The bound data object does not have to be defined inline in the template

<p v-bind:class="classObject"></p>
data: {
 classObject: {
 active: true,
 'text-danger': false
 }
}

The rendered result and Same as above. We can also bind a computed property of the returned object here. This is a common and powerful pattern:

<p v-bind:class="classObject"></p>
data: {
 isActive: true,
 error: null
},
computed: {
 classObject: function () {
 return {
  active: this.isActive && !this.error,
  'text-danger': this.error && this.error.type === 'fatal'
 }
 }
}

Array syntax

## We can pass an array to v-bind:class to Apply a class list

<p v-bind:class="[activeClass, errorClass]"></p>
data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

Rendered as:

<p class="active text-danger"></p>

If you also want to switch the classes in the list based on conditions, you can use the ternary

expression

<p v-bind:class="[isActive ? activeClass : &#39;&#39;, errorClass]"></p>

Writing this way will always add errorClass, but only add activeClass when isActive is truthy.

However, it is a bit cumbersome to write like this when there are multiple conditional classes. Therefore, object syntax can also be used in array syntax

<p v-bind:class="[{ active: isActive }, errorClass]"></p>

3. Used on components

When in a self-defined component When using the class attribute on

, these classes will be added to the root element of the component. Classes that already exist on this element will not be overwritten. For example, if you declare this component:

Vue.component('my-component', {
 template: '<p class="foo bar">Hi</p>'
})

Then add some classes when using it

<my-component class="baz boo"></my-component>

The HTML will be rendered as:

<p class="foo bar baz boo">Hi</p>

The same applies to classes with

data binding

<my-component v-bind:class="{ active: isActive }"></my-component>

When isActive is truthy, HTML will be rendered as

<p class="foo bar active">Hi</p>

4. Binding Defining inline styles Object syntax

The object syntax of v-bind:style is very intuitive - it looks very like CSS, but it is actually a

JavaScript

Object. CSS property names can be named using camelCase or kebab-case (remember to use single quotes):

<p v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }"></p>
data: {
 activeColor: 'red',
 fontSize: 30
}

It is usually better to bind directly to a style object, which will Make the template clearer

<p v-bind:style="styleObject"></p>
data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}

Similarly, object syntax is often used in conjunction with the calculated properties of the returned object

Array syntax

   v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上

<p v-bind:style="[baseStyles, overridingStyles]"></p>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

使用JS判断字符串中包含内容方法总结

JS+HTML5实绑定鼠标事件的粒子动画

The above is the detailed content of Analysis of use cases of V-bind directive in VueJs. For more information, please follow other related articles on the PHP Chinese website!