1. **绑定简单属性**
- **基本使用示例**
- 假设在Vue组件中有一个`data`属性用于存储图片的链接，如下：
```javascript
export default {
data() {
return {
imgUrl: 'https://example.com/image.jpg'
};
}
};
```
- 可以使用`v - bind`将这个`imgUrl`属性绑定到`img`标签的`src`属性上，在模板中这样写：
```vue
<template>
<img v - bind:src="imgUrl">
</template>
```
- 这样，图片就会根据`imgUrl`中的链接来显示。并且如果`imgUrl`的值发生改变，比如通过某个方法更新了它，图片的`src`属性也会随之更新，从而显示新的图片。
- **动态更新属性**
- 例如，有一个按钮，点击它可以切换图片。在组件中添加一个方法和另一个`data`属性来实现这个功能：
```javascript
export default {
data() {
return {
imgUrl: 'https://example.com/image.jpg',
alternativeUrl: 'https://example.com/another - image.jpg'
};
},
methods: {
changeImage() {
this.imgUrl = this.alternativeUrl;
}
}
};
```
- 在模板中添加按钮并绑定点击事件：
```vue
<template>
<div>
<img v - bind:src="imgUrl">
<button v - on:click="changeImage">切换图片</button>
</div>
</template>
```
- 当点击按钮时，`changeImage`方法会被调用，`imgUrl`的值会更新，进而`img`标签的`src`属性也会更新，显示新的图片。
2. **绑定class属性**
- **对象语法**
- **添加/移除单个类**：可以根据组件中的数据来动态地添加或移除一个类。例如，定义一个布尔型的`data`属性来控制一个类是否添加到元素上。
```javascript
export default {
data() {
return {
isHighlighted: false
};
}
};
```
- 在模板中使用`v - bind:class`的对象语法：
```vue
<template>
<div v - bind:class="{ 'highlight': isHighlighted }">
这是一个div。
</div>
</template>
```
- 当`isHighlighted`为`true`时，`div`元素会添加`highlight`类；当`isHighlighted`为`false`时，不会添加这个类。
- **同时控制多个类**：可以在对象语法中包含多个键值对来同时控制多个类。例如：
```javascript
export default {
data() {
return {
isActive: false,
hasError: true
};
}
};
```
```vue
<template>
<div v - bind:class="{ 'active': isActive, 'error': hasError }">
这是一个div。
</div>
</template>
```
- 这样，根据`isActive`和`hasError`的值，`div`元素会相应地添加或移除`active`和`error`类。
- **数组语法**
- **简单的类数组绑定**：可以使用数组语法来绑定多个类。假设在组件中有两个`data`属性表示类名：
```javascript
export default {
data() {
return {
className1: 'text - bold',
className2: 'text - italic'
};
}
};
```
- 在模板中使用`v - bind:class`的数组语法：
```vue
<template>
<div v - bind:class="[className1, className2]">
这是一个div。
</div>
</template>
```
- 这样，`div`元素就会同时添加`text - bold`和`text - italic`这两个类。
- **结合三元表达式使用数组语法**：可以在数组语法中使用三元表达式来更灵活地控制类的添加。例如：
```javascript
export default {
data() {
return {
isLarge: true,
baseClass: 'text - normal'
};
}
};
```
```vue
<template>
<div v - bind:class="[isLarge? 'text - large' : baseClass]">
这是一个div。
</div>
</template>
```
- 当`isLarge`为`true`时，`div`元素会添加`text - large`类；当`isLarge`为`false`时，会添加`text - normal`类。
3. **绑定style属性**
- **对象语法**
- **简单的样式对象绑定**：可以使用`v - bind:style`的对象语法来动态地设置元素的样式。例如，根据组件中的一个`data`属性来设置元素的颜色。
```javascript
export default {
data() {
return {
textColor: 'red'
};
}
};
```
```vue
<template>
<div v - bind:style="{ 'color': textColor }">
这是一个div。
</div>
</template>
```
- 这样，`div`元素的文字颜色就会被设置为`red`。
- **设置多个样式属性**：可以在样式对象中包含多个键值对来设置多个样式属性。例如：
```javascript
export default {
data() {
return {
fontSize: '16px',
backgroundColor: 'lightgray'
};
}
};
```
```vue
<template>
<div v - bind:style="{ 'font - size': fontSize, 'background - color': backgroundColor }">
这是一个div。
</div>
</template>
```
- 这样，`div`元素的字体大小会被设置为`16px`，背景颜色会被设置为`lightgray`。
- **数组语法（较少使用）**
- 可以使用数组语法来合并多个样式对象。例如，假设有两个样式对象：
```javascript
export default {
data() {
return {
styleObject1: { 'font - size': '16px' },
styleObject2: { 'color': 'blue' }
};
}
};
```
```vue
<template>
<div v - bind:style="[styleObject1, styleObject2]">
这是一个div。
</div>
</template>
```
- 这样，`div`元素就会同时应用`styleObject1`和`styleObject2`中的样式，即字体大小为`16px`且颜色为`blue`。