好资源导航 » 文章资讯 » Vue.2.0.5实现Class 与 Style 绑定的实例

Vue.2.0.5实现Class 与 Style 绑定的实例

2024-02-18 14:40:07 62

Class与Style绑定

数据绑定一个常见需求是操作元素的class列表和它的内联样式。因为它们都是属性，我们可以用v-bind处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在v-bind用于class和style时，Vue.js专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

绑定HTMLClass

对象语法

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

上面的语法表示classactive的更新将取决于数据属性isActive是否为真值。

我们也可以在对象中传入更多属性用来动态切换多个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是true时添加activeClass。

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

WithComponents

ThissectionassumesknowledgeofVueComponents.Feelfreetoskipitandcomebacklater.

Whenyouusetheclassattributeonacustomcomponent,thoseclasseswillbeaddedtothecomponent'srootelement.Existingclassesonthiselementwillnotbeoverwritten.

Forexample,ifyoudeclarethiscomponent:

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

Thenaddsomeclasseswhenusingit:

TherenderedHTMLwillbe:

Hi

Thesameistrueforclassbindings:

WhenisActiveistruthy,therenderedHTMLwillbe:

绑定内联样式

对象语法

v-bind:style的对象语法十分直观——看着非常像CSS，其实它是一个JavaScript对象。CSS属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：

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

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

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

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

数组语法

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

自动添加前缀

当v-bind:style使用需要特定前缀的CSS属性时，如transform，Vue.js会自动侦测并添加相应的前缀。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

Vue.2.0.5实现Class 与 Style 绑定的实例

热门推荐

随机推荐