v-bind的作用和插值表达式差不多， 只不过v-bind主要用于动态设置标签的属性。下面本篇文章就来带大家详细了解一下vue的动态属性绑定指令v-bind，希望对大家有所帮助！
v-bind指令是专门操作属性的指令，那么什么是属性呢？例如我们经常设置图片是src，设置鼠标悬停的文本是title，还有类class等，这种就是属性。
1、v-bind指令的介绍和基本使用
1）、作用：动态绑定属性
除了内容需要动态来实现之外，有时候元素的属性我们也希望能够动态来改变
立即学习“前端免费学习笔记（深入）”；
比如可以动态绑定a元素的href属性，img的src属性等等。
2）、与插值操作的对比：
插值操作的主要作用是将Vue实例中的数据插入到模板当中，改变data中的数据可以动态改变显示的内容。而很多时候我们的属性值也是需要变化的，比如src可能是从服务器请求过来的，把值放到vue实例的data中，然后将data中的属性赋到模板中的属性里面，我们只需要修改data中的值就可以实时响应。（学习视频分享：vue）
3）、写法：在属性前面加上v-bind:（语法糖：直接在属性前面加上 :）
登录后复制
示例
const app = new Vue({ el: "#app", data: { message: '你好啊！', // 从服务器请求过来的数据 imgURL: 'https://img-home.csdnimg.cn/images/20210716103807.jpg', aHref: 'http://www.baidu.com' } })
登录后复制
2、v-bind动态绑定class属性（对象语法）
1）、作用：
动态绑定class属性之后，class的值是一个变量，可以将它放到data中动态绑定样式
2）、用法：
v-bind:class= "{key1：value1，key2：value2}"
登录后复制
若对象内容value值为true，则该key样式起作用
若对象内容value值为false，则该key样式不起作用
value值放在data中作为变量，进行使用，当使用时让它为true，不使用时为false，
这样就可以动态的修改属性class的值
//样式 .active{ color: red; } -------------------------------------- {{message}}
//第一种：直接用style中的样式，固定写死； {{message}}
//第二种：用指令v-bind,class的属性值active为变量； //vue解析，变量对应data中active属性值，则用了active的样式； {{message}}
//第三种：用指令v-bind；后面接对象{key1：value1，key2：value2} //isActive为true则active样式起作用。 //isActive为false则active样式不起作用。 //设置按钮，让点击按钮，颜色变化 {{message}}
//用固定写的class值为title和动态添加的class结合，它们不会覆盖 {{message}}
//class中的对象比较复杂，则直接放在一个methods中,然后调用这个函数 const app = new Vue({ el:"#app", data:{ message:"你好啊", active:"active", isActive:true, isLine:true }, methods:{ btn:function () { this.isActive=!this.isActive }, //执行该函数，让isActive变为相反的值，若true变为false，若false变为true； //isActive的取值决定class是否用该变量，是否用对应的样式； getClasses:function () { return {active:this.isActive, line:this.isLine} } //返回，作为class的值 } })
登录后复制
3、v-bind动态绑定class属性（数组语法）
用指令v-bind后面接一个数组，[key1,key2…]，则class值为数组中内容，可为多个；
数组语法一般用的不多，因为它也写死了，既然写死了，那可以直接用原始的方法
const app = new Vue({ el: "#app", data: { message: '你好啊！', active: 'aaa', line: 'bbb' }, methods: { getClasses: function () { return [this.active, this.line] } } }){{message}}
{{message}}
// 上面两种的效果都是一样的{{message}}
// 将数组放在方法中，然后调用该方法
登录后复制
4、v-bind动态绑定内联style属性（对象语法）
1）、应用场景：
组件开发中，可能将某个块(如导航栏)封装起来，在不同地方使用这个块的时候，可能想让显示不同的样式，可以用v-bind动态绑定属性style
2）、格式为：
{{message}}
样式值加引号时，vue在解析的时候，会把它当成一个固定值
{{message}}
样式值不加双引号时，则当做变量，vue将它解析成一个变量， 变量值会在data中找
const app = new Vue({ el: "#app", data: { message: '你好啊！', finalSize: 100, finalColor: 'red' }, methods: { getStyles: function () { return { fontSize: this.finalSize + 'px', backgroundColor: this.finalColor } } }}){{message}}
{{message}}
{{message}}
登录后复制
5、v-bind动态绑定内联style属性（数组语法）
数组语法格式为：
{{message}}
同样不常用
const app = new Vue({ el: "#app", data: { message: '你好啊！', baseStyle: { backgroundColor: 'red' }, baseStyle1: { fontSize: '100px' }, } }){{message}}
登录后复制
注意：
1、动态参数使用时应避免使用大写字母，因为浏览器会将元素的属性名强制转化成小写字母
var vm = new Vue({ el: "#app", data: { Attribute: "href", url: "http://www.baidu.com" } })
登录后复制
相关的报错信息为：
2、动态参数中不能含有引号和空格
当含有引号时会进行相关红色报错：
当含有空格时其在浏览器端的报错情况如下所示：
（学习视频分享：vue、vue）
以上就是深入浅析Vue的动态属性绑定指令v-bind的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3231730.html
