vue.js—v-bind绑定Class与Style

简介: vue.js—v-bind绑定Class与Style

v-bind绑定Class与Style

v-bind

v-bind用于动态地绑定一个或者多个attribute,或者一个porp到表达式。首先明确一下attribute的概念,什么是attribute,attribute 是元素标签的属性。那什么是元素标签的属性?以HTML为例,例如:

<p>这就是一个标签
<p>to be better</p>这就是一个元素,可以这样理解,元素有一个开始的标签和结束的标签组成用来包含某些内容。
属性为元素提供各种附加信息,总是以属性名=属性值这种形式出现。
<p color='red'></p>中的color='red'就是元素标签的属性。

这篇博客主要总结的是v-bind绑定class和style这一种情况。在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

绑定HTML Class

对象语法

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

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

上面的语法表示

active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。

这儿的property,表示 是元素对象的属性。

核心代码

<div id ="example">   
  <div v-bind:class="{ active: isActive }">
  </div>
</div>
<script type="text/javascript">
      var vm=new Vue({
        el:'#example',
        data:{
          isActive:true,
        },
      });
</script>
<style>
  .active{background:#FF0000;}
</style>

多个对象

你可以在对象中传入更多字段来动态切换多个 class。此外,

v-bind:class 指令也可以与普通的 class attribute 共存。当有如下模板:

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
<script type="text/javascript">
      var vm=new Vue({
        el:'#example',
        data: {
            isActive: true,
            hasError: false
            }
      });
</script>

当 isActive 或者 hasError 变化时,class 列表将相应地更新。例如,如果 hasError 的值为 true,class 列表将变为 “static active text-danger”。

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

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

绑定一个返回对象的计算属性

<div v-bind:class="classObject"></div>
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 列表:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src=vue.js type="text/javascript" charset="utf-8" ></script>
  </head>
  <body>
    <div id ="example">
      <div 
      v-bind:class="[isActive,isabc]"
      </div>
    </div>
    <script type="text/javascript">
      var vm=new Vue({
        el:'#example',
        data:{
          isActive:'active',
          isabc:'abc'
        },
      });
    </script>
    <style>
      .active{background:#FF0000;}
      .abc={color:##FF00;}
    </style>
  </body>
</html>

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

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

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

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

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

绑定内联样式

对象语法

v-bind:style 的对象语法十分直观,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来)

<body>
    <div id ="example">
      <div 
      v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"
        wangwei 
      </div>
    </div>
    <script type="text/javascript">
      var vm=new Vue({
        el:'#example',
        data:{
          activeColor:'red',
          fontSize:30
        },
      });

直接绑定一个样式对象

<div v-bind:style="style"></div>
data{
    style{
        color:'red',
        fontSize:'30px'    
    }
}

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

数组语法

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

<div v-bind:style="[baseStyles, overridingStyles]"></div>
目录
相关文章
|
4月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
42 0
|
3月前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
382 61
|
3月前
|
Web App开发 JavaScript 前端开发
JavaScript 类(class)
JavaScript 类(class)
23 2
JavaScript 类(class)
|
3月前
|
JavaScript 前端开发
js之class继承|27
js之class继承|27
|
3月前
|
JavaScript 前端开发
vue-day03 v-on事件处理,表单输入绑定
文章介绍了Vue.js中事件处理和表单输入绑定的使用。包括v-on指令监听事件、事件处理方法、内联处理器、访问原生DOM事件、事件修饰符、按键修饰符、系统修饰符、exact修饰符和鼠标按钮修饰符。同时,讲解了如何使用v-model实现单行文本、多行文本、复选框和单选按钮的双向数据绑定,并提供了修饰符的使用示例。这些特性使得Vue.js在处理表单输入和事件时更加灵活和方便。
vue-day03 v-on事件处理,表单输入绑定
|
2月前
|
JSON 数据可视化 JavaScript
低代码可视化教你Vue遍历循环绑定
低代码可视化教你Vue遍历循环绑定
31 0
|
4月前
|
JavaScript
Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
这篇文章介绍了Vue中组件自定义事件的绑定和解绑方法,通过代码实例详细说明了在父子组件间如何传递数据,包括使用`$emit`触发事件、`$on`和`$off`绑定和解绑事件,以及在实际项目中的应用和调试技巧。
Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
|
4月前
|
JavaScript
Vue——vue2监听元素style变化
Vue——vue2监听元素style变化
59 2
|
4月前
|
JavaScript 前端开发
Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别(2022/7/12)
这篇博客文章讲解了Vue中绑定样式和条件渲染的方法,包括类样式绑定的不同写法、`v-show`和`v-if`的条件渲染区别以及它们的使用场景和特点,并通过代码实例和测试效果来展示具体应用。
Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别(2022/7/12)
|
5月前
|
JavaScript
vue 中对style、disable 等样式进行条件判断
vue 中对style、disable 等样式进行条件判断
264 1