基础语法
v-bind
修改元素属性
1、DOM 操作
获取元素
创建元素 document.createElement
innerHTML
appendChild
document.getELmentByld('img').src = ""
document.getELmentByld('img').setAttribute('src','')
2、在vue中，一般情况下，不做DOM操作，而是通过数据绑定的方式
v-bind 就是专门用来绑定元素的属性的，且这个v-bind指令可以与元素的所有属性进行绑定
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
<style>
img {
width: 200px;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="pic" v-bind:alt="alt" v-bind:title="title">
</div>
<script>
let app = new Vue({
el: "#app",
data: {
pic: "./tab1.jpg",
alt: "图片加载失败",
title: "足球"
}
})
</script>
</body>
</html>
简写
<img :src="pic" :alt="alt" :title="title">
怎么用呢
基础用法
v-bind 是 Vue.js 框架中非常强大和常用的指令之一。它用于动态地绑定 HTML 元素的属性或组件的属性到 Vue 实例中的数据。
使用 v-bind，你可以将 HTML 元素的属性和 Vue 实例的数据进行绑定，使它们保持同步。以下是几个关于 v-bind 的示例：
动态绑定属性：
<img v-bind:src="imageURL">
通过 v-bind 将<img>标签的src属性与 Vue 实例中的imageURL 数据进行绑定。这样，当imageURL的值发生变化时，图片的src 属性会自动更新。
绑定 CSS 类：
<div v-bind:class="{ 'highlight': isActive, 'error': hasError }"></div>
通过 v-bind 将
绑定内联样式：
<div v-bind:style="{
backgroundColor: bgColor, color: textColor }"></div>
通过 v-bind 将<div>标签的style属性与 Vue 实例中的 bgColor和textColor数据进行绑定。这样，当数据发生变化时，元素的背景色和文本颜色会相应地改变。
绑定表单元素属性：
<input type="text" v-bind:value="inputValue">
通过 v-bind 将<input>标签的value属性与Vue实例中的inputValue数据进行绑定。当用户输入数据并改变inputValue的值时，输入框的值也会相应变化。
动态绑定组件属性：
<my-component v-bind:title="componentTitle"></my-component>
通过 v-bind 将自定义组件<my-component>的title属性与Vue 实例中的componentTitle进行绑定。这样，当componentTitle的值发生变化时，组件的属性会相应更新。
通过以上示例，你可以看到 v-bind 可以用于各种不同的场景，包括绑定 HTML 特性、CSS 类、内联样式、表单元素属性和组件属性。这使得咱们可以根据需要动态更新页面上的元素，从而实现更灵活和交互性的应用程序。
解决一些难题
动态渲染列表：
<ul>
<li v-for="item in items" v-bind:key="item.id">{
{ item.name }}</li>
</ul>
通过使用 v-bind 和 v-for 指令，可以动态地将一个数组 items 渲染为一个列表。通过设置 v-bind:key，Vue 可以跟踪每个列表项的唯一标识符，以优化列表的性能。
条件渲染元素：
<div v-if="isVisible" v-bind:class="{ 'hidden': isHidden }">Visible Element</div>
通过使用 v-bind 和 v-if 指令，可以根据条件动态渲染元素。isVisible 控制元素是否显示，isHidden 控制元素是否隐藏。通过绑定 class 属性，可以根据条件动态添加或移除 CSS 类来控制元素的样式。
动态加载图片：
<img v-bind:src="imageURL" alt="">
在这个示例中，通过使用 v-bind 将 src 属性与 imageURL 数据进行绑定，可以实现根据数据动态加载图片。当 imageURL 的值发生变化时，图片的源路径将自动更新。
外部链接处理：
<a v-bind:href="externalLink" target="_blank">External Link</a>
在这个示例中，通过使用 v-bind 将链接的 href 属性与 externalLink 数据进行绑定，可以实现根据数据动态设置外部链接。当 externalLink 的值发生变化时，链接的目标 URL 将相应更新。
