在vue中，v-bind指令主要用于属性绑定，完整语法“v-bind:property=value”，缩写语法“:href=value”；表明将该属性的属性值当成一个变量，vue会对它解析，并将解析到的变量赋予data属性中对应的值。
本教程操作环境：windows7系统、vue3版，dell g3电脑。
vue中v-bind介绍
v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。
v-bind  主要用于属性绑定，vue官方提供了一个简写方式 :bind,如：
<!-- 完整语法 -->v-bind:property="value"//此时 value会被解析成一个变量，若是在vue实例中没有找到，会显示找不到错误<!-- 缩写 -->:href="value"
加上v-bind后，就表明将该属性的属性值当成一个变量 vue会对它解析，将解析到的变量 赋予data属性中对应的值。
绑定html class
一、对象语法：
我们可以给v-bind:class 一个对象，以动态地切换class。注意：v-bind:class指令可以与普通的class特性共存
html代码：
<ul class="box" v-bind:class="{‘textcolor‘:iscolor, ‘textsize‘:issize}"> <li>学习vue</li> <li>学习node</li> <li>学习react</li></ul>
css代码：
.box{ border:1px dashed #f0f;}.textcolor{ color:#f00; background-color:#eef;}.textsize{ font-size:30px; font-weight:bold;}
js代码：
var vm= new vue({ el:‘.box‘, data:{ iscolor:true, issize:true }})
从图中可以看到，html最终渲染为 <ul class="box textcolor textsize"></ul>
当 iscolor 和 issize 变化时，class列表将相应的更新，例如，将issize改成false，class列表将变为 <ul class="box textcolor"></ul>
也可以直接绑定数据里的一个对象：
html代码：
<ul class="box" :class="classobject"> <li>学习vue</li> <li>学习node</li> <li>学习react</li></ul>
js代码：
var vm= new vue({ el:‘.box‘, data:{ classobject:{ ‘textcolor‘:true, ‘textsize‘:false //不渲染，注意看下面的截图 } }})
二、数组语法
我们可以把一个数组传给v-bind:class，以应用一个class列表
html代码：
<ul class="box" :class="[classa, classb]"> <li>学习vue</li> <li>学习node</li> <li>学习react</li></ul>
js代码：
var vm= new vue({ el:‘.box‘, data:{ classa:‘textcolor‘, classb:‘textsize‘ }})
如果想根据条件切换列表中的class，可以用三目运算
html代码：
<ul class="box" :class="[isa?classa:‘‘, classb]"> <li>学习vue</li> <li>学习node</li> <li>学习react</li></ul>
js代码：
var vm= new vue({ el:‘.box‘, data:{ classa:‘textcolor‘, classb:‘textsize‘, isa:false }})
在这个例子中，首先判断isa的boolean值，如果为true，则渲染classa；如果为false，则不渲染。classb没有做三目运算，所以是始终显示的，看看页面截图
对于多个class，可以这么写：
<div v-bind:class="[classa, { classb: isb, classc: isc }]">
绑定内联样式
一、对象语法
v-bind:style 的对象语法十分直观--非常像css，其实它是一个javascript对象，css属性名必须用驼峰命名法 （官方文档写的是既可以用驼峰也可以用 短横分隔命名法），但是用短横分隔是会报错的
html代码：（这里演示css属性名用短横分隔报错）
<div id="box" :style="{color:activecolor, font-size:size}">红嘴绿鹦哥</div>
js代码：
var vm= new vue({ el:‘#box‘, data:{ activecolor:‘#f00‘, size:‘30px‘, shadow:‘5px 2px 6px #000‘ }})
页面报错：
当我们按照驼峰命名法的规则去写的时候，一切正常：
html代码：
<div id="box" :style="{color:activecolor, fontsize:size, textshadow:shadow}">红嘴绿鹦哥</div>
查看页面效果：
也可以直接绑定到一个样式对象，这样更好，让模板更清晰：
html代码：
<div id="box" :style="styleobject">红嘴绿鹦哥</div>
js代码：
var vm= new vue({ el:‘#box‘, data:{ styleobject:{ color:‘red‘, fontsize:‘30px‘ } }})
二、数组语法
可将多个样式对象应用到一个元素上
html代码：
<div class="box" :style="[styleobjecta, styleobjectb]">好好学习，天天向上</div>
js代码：
var vm2= new vue({ el:‘.box‘, data:{ styleobjecta:{ fontsize:‘36px‘, color:‘blue‘ }, styleobjectb:{ textdecoration:‘underline‘ } }})
页面效果：
添加图片src地址
给img标签的src属性赋值时，按照传统的方法{{url}}：
html代码：
<img class="box" src="{{url}}" >
js代码：
var vm= new vue({ el:‘.box‘, data:{ url:‘https://ss0.bdstatic.com/5av1bjqh_q23odcf/static/superman/img/logo/bd_logo1_31bdc765.png‘ }})
此时，图片可以正常显示，但是会报一个404错误，查看控制台可以看到，vue更加推荐我们使用 v-bind:src
使用 v-bind:src 再来试试看
html代码：
<img class="box" :src="url" >
查看页面截图：
【相关推荐：vuejs视频教程、web前端开发】
以上就是vue中v-bind有什么用的详细内容。