本文已参与「新人创作礼」活动，一起开启掘金创作之路。
目录
2、使用 v-bind 定义img标签 src、title、class 属性
上一节我们学习了 v-if 指令，通过操作 dom 元素的方式，来切换元素的显示状态。
那如果说我只是想操作元素的某个属性呢？咱们这一节就专门来学习操作属性的 v-bind 指令。
一、v-bind 语法介绍
在具体演示语法以前，我们首先要明确一下什么是属性，我们来回忆一下有哪些常见的属性，比如：src、title、class
他们有一个共同点：就是都写在元素的内部。下面我们来看看它的语法：
编辑
我们以 img 标签为例
1、 img标签 的固定写死的写法
编辑
2、使用 v-bind 定义img标签 src、title、class 属性
编辑
其中 img 标签定义class属性，我们演示了两种写法：
三元表达式写法
如果 isActive 它的值为true，那么返回的就是active这个类名，负责就返回一个空字符串。
对象的写法（推荐）
active这个类名是否生效取决于isActive的值，isActive为true就生效，为false就移除。
3、v-bind的简写写法
直接把 v-bind 去掉即可，如下图：
编辑
二、代码验证测试
1、v-bind指令之img_src_title
（1）实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>11_v-bind指令之img_src_title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id= "app">
<!-- 1、img标签 的固定写死的写法 -->
<img src= "./img/csdn.png"/><br>
<!-- 2、v-bind 固定写死的写法 -->
<!-- 这样写是不显示的，报异常 -->
<!-- <img v-bind:src= "./img/csdn.png"/> -->
<!-- 路径加单引号，这样写是可以显示的 -->
<img v-bind:src="'./img/csdn.png'" /><br>
<!-- 3、v-bind指令的写法 -->
<img v-bind:src="imgSrc" v-bind:title="imgTitle+'!!!'"/><br>
<!-- 4、v-bind指令的简写写法 -->
<img :src="imgSrc" :title="imgTitle+'_简写!!!'" /><br>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc: "./img/csdn.png",
imgTitle: "csdn-logo",
},
})
</script>
</body>
</html>
（2）效果展示
当把鼠标指针停留在图片上面，img标签title属性上面的文字，就会显示出来，如下图
其他的都有代码注释，就不多说了。
编辑
2、v-bind指令之img_class属性
（1）实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>12_v-bind指令之img_class属性</title>
<!-- 定义css内部样式表：在 HTML5 中, type 属性不再是必须的。默认值为 "text/css" -->
<style>
.active{
/* soild单词千万别写错，否则无效果*/
/* border: 1px soild red; */
border: 1px solid red;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<!-- class类选择器_三元表达式写法 -->
<img :src="imgSrc"
:title="imgTitle+'_简写!!!'"
:class="isActive?'active':''"
@click="toggleActive" /><br>
<!-- class类选择器_对象的写法（推荐） -->
<img :src="imgSrc"
:title="imgTitle+'_简写!!!'"
:class="{active:isActive}"
@click="toggleActive" /><br>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc: "./img/csdn.png",
imgTitle: "csdn-logo",
isActive: false
},
methods: {
toggleActive:function(){
console.log("toggleActive方法被执行！");
console.log(this.isActive + "");
// 给isActive去反值
this.isActive = !this.isActive;
}
},
})
</script>
</body>
</html>
（2）效果展示
点击图片，即添加 一个红色边框样式。
编辑
有关三元表达式的写法、对象的写法，上面语法介绍已经讲到，这里就不多少了。
另外写代码的时候需要谨慎，注意别把 solid 写成 soild 了，那样会无效果
检查元素的时候会报提示：Invalid property value 属性值无效
编辑
三、内容-总结
编辑
\
