好资源导航 » 文章资讯 » 详解VueJs中的V-bind指令

详解VueJs中的V-bind指令

2023-09-13 10:32:04 60

引子

v-bind 主要用于属性绑定，Vue官方提供了一个简写方式:bind，例如：

一、概述

v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。

示例：

二、绑定HTMLClass

对象语法

我们可以传给v-bind:class一个对象，以动态地切换class

上面的语法表示active这个class存在与否将取决于数据属性isActive的truthiness

你可以在对象中传入更多属性来动态切换多个class。此外，v-bind:class指令也可以与普通的class属性共存。当有如下模板:



和如下data

data:{
isActive:true,
hasError:false
}

结果渲染为：

当isActive或者hasError变化时，class列表将相应地更新。例如，如果hasError的值为true，class列表将变为"staticactivetext-danger"

绑定的数据对象不必内联定义在模板里


data:{
classObject:{
active:true,
'text-danger':false
}
}

渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：



data:{
isActive:true,
error:null
},
computed:{
classObject:function(){
return{
active:this.isActive&&!this.error,
'text-danger':this.error&&this.error.type==='fatal'
}
}
}

数组语法

我们可以把一个数组传给v-bind:class，以应用一个class列表


data:{
activeClass:'active',
errorClass:'text-danger'
}

渲染为：

如果你也想根据条件切换列表中的class，可以用三元表达式

这样写将始终添加errorClass，但是只有在isActive是truthy时才添加activeClass。

不过，当有多个条件class时这样写有些繁琐。所以在数组语法中也可以使用对象语法

三、用在组件上

当在一个自定义组件上使用class属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

例如，如果你声明了这个组件：

Vue.component('my-component',{
template:'Hi'
})

然后在使用它的时候添加一些class

HTML将被渲染为:

Hi

对于带数据绑定class也同样适用

当isActive为truthy时，HTML将被渲染成为

Hi

四、绑定内联样式

对象语法

v-bind:style的对象语法十分直观——看着非常像CSS，但其实是一个JavaScript对象。CSS属性名可以用驼峰式(camelCase)或短横线分隔(kebab-case，记得用单引号括起来)来命名：


data:{
activeColor:'red',
fontSize:30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰



data:{
styleObject:{
color:'red',
fontSize:'13px'
}
}

同样的，对象语法常常结合返回对象的计算属性使用

数组语法

v-bind:style的数组语法可以将多个样式对象应用到同一个元素上

总结

以上所述是小编给大家介绍的VueJs中的V-bind指令，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

详解VueJs中的V-bind指令

热门推荐

随机推荐