v-bind指令
v-bind
用于绑定数据和元素属性
例如:绑定a
标签的href
属性
<div class="app">
<a v-bind:href="url">click me</a>
</div>
var app = new Vue({ el:'.app', data:{ url:"https://www.baidu.com", } });
以上代码中,使用
不光是
例如,绑定
v-bind
绑定了a
标签的href
属性,当a
标签被点击时,会根据对应vue
中的对应的url
数据进行跳转到https://www.baidu.com
不光是
href
属性可以被v-bind
指令绑定,任何属性都可以被绑定例如,绑定
src
属性、class
属性<div class="app"> <a v-bind:href="url" v-bind:class="klass">click me</a> <img v-bind:src="imgsrc"> </div>
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
imgsrc:"https://cn.vuejs.org/images/logo.png",
kclass:"btn btn-default"
}
});
上述代码中,同时绑定了
也许你会奇怪,为什么它会知道
用a
标签的href
属性和class
属性,以及img
标签的src
属性,其数据分别对应data
里中的数据也许你会奇怪,为什么它会知道
a
标签的href
值url
对应的就是data
中的url
?这其实就是vue
背后的一种默认机制,它就是知道。但需要注意他们的名字得对应v-bind
的绑定的属性的值也可以是一个对象,例如:<div class="app"> <a v-bind:class="{active:isActive}">click me</a> </div>
以上代码,active
表示要添加的类名,isActive
对应vue
中的数据,表示在什么情况下添加该类名,对应isActive
为真才添加active
类
由于使用频繁,通常将v-bind:属性名=" "
的格式简写成:属性名=" "
<div class="app"> <a :class="{active:isActive}">click me</a> </div>
故乡明
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话