Vue2.x动态绑定 Style 与 Class 样式

发布时间:2018-09-19 编辑:小张个人博客 查看次数:4418

Class 与 Style 绑定

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

绑定 HTML Class

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

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的,如果 isActivetrue  就行添加 active 样式

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

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
new Vue({
   el:".vue-app",
	   data:{
               mes:"动态 绑定 HTML Class",
	       isActive: true,
	       hasError: false
	   }
});

结果渲染为:

<div class="static active"></div>

数组语法

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

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为:

<div class="active text-danger"></div>

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

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

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

truthy 不是 true,在 JavaScript 中,Truthy (真值)指的是在 Boolean 上下文中转换后的值为真的值。所有值都是真值,除非它们被定义为 falsy (即, 除了false,0,“”,null,undefined 和 NaN 外)。




出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号