在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代码：
登录后复制登录后复制登录后复制登录后复制 学习Vue 学习Node 学习React
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最终渲染为
当 isColor 和 isSize 变化时，class列表将相应的更新，例如，将isSize改成false，class列表将变为
也可以直接绑定数据里的一个对象：
HTML代码：
登录后复制登录后复制登录后复制登录后复制 学习Vue 学习Node 学习React
JS代码：
var vm= new Vue({ el:‘.box‘, data:{ classObject:{ ‘textColor‘:true, ‘textSize‘:false //不渲染，注意看下面的截图 } }})
登录后复制
二、数组语法
我们可以把一个数组传给v-bind:class，以应用一个class列表
HTML代码：
登录后复制登录后复制登录后复制登录后复制 学习Vue 学习Node 学习React
JS代码：
var vm= new Vue({ el:‘.box‘, data:{ classA:‘textColor‘, classB:‘textSize‘ }})
登录后复制
如果想根据条件切换列表中的class，可以用三目运算
HTML代码：
登录后复制登录后复制登录后复制登录后复制 学习Vue 学习Node 学习React
JS代码：
var vm= new Vue({ el:‘.box‘, data:{ classA:‘textColor‘, classB:‘textSize‘, isA:false }})
登录后复制
在这个例子中，首先判断isA的boolean值，如果为true，则渲染classA；如果为false，则不渲染。classB没有做三目运算，所以是始终显示的，看看页面截图
对于多个class，可以这么写：
绑定内联样式
一、对象语法
v-bind:style 的对象语法十分直观--非常像CSS，其实它是一个Javascript对象，CSS属性名必须用驼峰命名法 （官方文档写的是既可以用驼峰也可以用 短横分隔命名法），但是用短横分隔是会报错的
HTML代码：（这里演示CSS属性名用短横分隔报错）
红嘴绿鹦哥登录后复制登录后复制登录后复制
JS代码：
var vm= new Vue({ el:‘#box‘, data:{ activeColor:‘#f00‘, size:‘30px‘, shadow:‘5px 2px 6px #000‘ }})登录后复制
页面报错：
当我们按照驼峰命名法的规则去写的时候，一切正常：
HTML代码：
红嘴绿鹦哥登录后复制登录后复制
查看页面效果：
也可以直接绑定到一个样式对象，这样更好，让模板更清晰：
HTML代码：
红嘴绿鹦哥登录后复制登录后复制
JS代码：
var vm= new Vue({ el:‘#box‘, data:{ styleObject:{ color:‘red‘, fontSize:‘30px‘ } }})登录后复制
二、数组语法
可将多个样式对象应用到一个元素上
HTML代码：
好好学习，天天向上登录后复制
JS代码：
var vm2= new Vue({ el:‘.box‘, data:{ styleObjectA:{ fontSize:‘36px‘, color:‘blue‘ }, styleObjectB:{ textDecoration:‘underline‘ } }})登录后复制
页面效果：
添加图片SRC地址
给img标签的src属性赋值时，按照传统的方法{{url}}：
HTML代码：
@@##@@登录后复制登录后复制
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代码：
@@##@@登录后复制登录后复制
查看页面截图：
【相关推荐：vuejs视频教程、vuejs视频教程】
以上就是vue中v-bind有什么用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2924164.html
赞 (0)关于作者
vue中隐藏元素的指令是什么上一篇 2025年3月11日 18:54:20jquery怎么实现点击隐藏元素下一篇 2025年3月11日 18:54:27AD推荐 黄金广告位招租... 更多推荐
相关推荐
vue中隐藏元素的指令是什么
vue中隐藏元素的指令是“v-show”。v-show指令根据表达式的真假，来决定一个元素显示或者隐藏，语法为“v-show=”表达式””。v-show指令是通过改变元素的css display属性来控制元素的显示和…
vue的导航钩子有哪几个
vue的导航钩子有3种：1、全局守卫钩子，是指路由示例上直接操作的钩子函数，特点是所有路由配置的组件都会触发。2、路由独享守卫钩子，是指在单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用。3、局部守卫钩子，是指在组件内执行的…
vscode写vue没有高亮语法怎么办
解决方法：1、打开vscode，点击扩展功能；2、在打开的窗口中搜索并安装Vetur插件；3、在顶部菜单中，依次点击“文件”-“首选项”-“设置”-“用户”-“文本编辑器”，找到并编辑“setting.json”文件；4、在配置文件中找到“…
移动web开发能用vue吗
移动web开发能用vue。Vue是一个开源JavaScript框架，能够开发单页面应用程序；它可以用作Web应用程序框架，旨在简化Web开发。vue支持移动端开发，适合制作移动端的Webapp；其入门成本低、快速上手，可以结合i-view、…
vue的导航链接组件是什么
vue的导航链接组件是“router-link”。“”组件支持用户在具有路由功能的应用中点击导航，通过to属性指定目标地址，语法为“…”；默认渲染为带有正确连接的“”标签，可以通过配置tag属性生成别的标签。 本教程操作环境：w…
vue是实时刷新dom吗
vue不是实时刷新dom。Vue中的数据更新是异步的，意味着在修改完Data之后并不能立刻获取修改后的DOM元素。Vue在更新DOM时是异步执行的，只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更，如果同一…
vue的混入可以使用生命周期吗
vue的混入可以使用生命周期。mixins（混入）中的生命周期会与引入mixins的组件的生命周期整合在一起调用，而且mixins中的生命周期函数会比引入mixins的组件调用的快。需要注意，多个mixins的生命周期会融合到一起运行，但是…
vue项目只有一个vue实例么
不是，vue项目中可以包含多个vue实例。在vue项目中，一般只有一个VUE实例在main.js中定义，其他都是vue组件实例。Vue是由一个个实例构建而成的，一个组件就是一个Vue的实例，每个组件内部都可以写属性，因此每一个组件都是一个V…
vue适用多页面应用吗
vue适用多页面应用。vue在工程化开发的时候依赖于webpack，而webpack是将所有的资源整合到一块后形成一个html文件 一堆js文件；如果想使用vue实现多页面应用，就需要对它的依赖进行重新配置，即通过修改webpack配置来让…
怎么查询当前vue的版本
查询当前vue版本的两种方法：1、在cmd控制台内，执行“npm list vue”命令查询版本，输出结果就是vue的版本号信息；2、在项目中找到并打开package.json文件，查找“dependencies”项即可看到vue的版本信息…
