专栏首页Modeng的专栏Vue2.5笔记:Class与Style几种绑定用法
原创

Vue2.5笔记:Class与Style几种绑定用法

在我们的项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如我们的网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了导航之外其他很多地方也都会用到这种方式处理选中与未选中。

除了设置 class 我们在项目中也经常设置元素的内联样式 style,在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 class 的添加/删除,利用 css() 方法设置/获取元素的内联样式。

那么在 vue 中 我们如何处理这类的效果呢?在 vue 中我们可以利用 「v-bind」 指令绑定我们的 class 与 style,接下来我们看看 vue 中给我们提供了哪些绑定它们的方式。

对象语法绑定 Class

Tab 页的切换是我们最常见的一个效果之一,如何让选中的标题高亮,常用的方式就是动态切换 class 。

<div id="app">
    <div class="button-group">
      <button
        v-for="(tab, index) in tabs" 
        v-bind:key="index" 
        v-bind:class="{active: currentTab === tab}" 
        v-on:click="currentTab = tab"
      >{{tab}}</button>
    </div>
    <component v-bind:is="currentTabComponent"></component>
</div>
<script>
Vue.component("tab1", {
    "template": "<p>这里是标签页1</p>"
});
Vue.component("tab2", {
  "template": "<p>这里是标签页2</p>"
});
Vue.component("tab3", {
  "template": "<p>这里是标签页3</p>"
});
var vm = new Vue({
  el: "#app",
  data: {
    currentTab: "tab1",
    tabs: ["tab1", "tab2", "tab3"]
  },
  computed: {
    currentTabComponent() {
      return this.currentTab;
    }
  }
});
</script>

从例子中我们看到 active 这个 class 是否存在取决于后面的表达式是真值或者假值,当为真值时 active 类被添加到元素上否则没有。

我们不仅可以添加一个 class,我们还可以同时添加多个 class,并且还可以与原有的 class 共存。

<button 
    class="btn"
    v-bind:class="{'btn-primary': isPrimary, active: isActive}"
></button>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        isPrimary: true,
        isActive: true  
      }
    });
</script>

渲染结果为:

<button class="btn btn-primary active"></button>

我们也可以直接绑定一个数据对象

<button class="btn" v-bind:class="activePrimary"></button>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        activePrimary: {
          'btn-primary': true, 
          active: true
        }
      }
    });
</script>

渲染结果与上面相同

<button class="btn btn-primary active"></button>

除此之外,我们还可以使用计算属性去绑定元素的 class。

<button v-bind:class="activeClass"></button>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        isActive: true
      },
      computed: {
        activeClass() {
          return {
            active: this.isActive
          }
        }
      }
    });
</script>

数组语法绑定 Class

Vue 中还支持我们给元素利用数组的方式添加 class,我们修改上面对象添加 class 的例子。

<button class="btn" v-bind:class="[primary, active]"></button>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        primary: 'btn-primary',
        active: 'btn-active'  
      }
    });
</script>

上面方式我们绑定了固定不变的,如果我们需要动态的切换 class 怎么办呢? 我们可以利用三元表达式或者在数组中使用对象语法。

//三元表达式
<button v-bind:class="[isActive ? active : '', primary]"></button>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        isActive: true,
        primary: 'btn-primary',
        active: 'btn-active'  
      }
    });
</script>

//数组中使用对象语法
<button v-bind:class="[{active: isActive}, primary]"></button>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        isActive: true,
        primary: 'btn-primary'
      }
    });
</script>

对象语法绑定 Style

绑定内联样式时的对象语法,看起来非常像 css,但他其实是一个 Javascript 对象,我们可以使用驼峰式或者短横线分隔命名。

<div v-bind:style="{color: colorStyle, backgroundColor: background}">
对象语法
</div>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        colorStyle: 'red',
        background: 'blue'
      }
    });
</script>

与 class 类似我们也可以使用数据对象的方式绑定。

<div v-bind:style="style">对象语法</div>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        style: {
          color: 'red',
          backgroundColor: 'blue'
        }
      }
    });
</script>

数组语法绑定 Style

Vue 允许我们同时绑定多个样式对象作用于同一个对象上。

<div v-bind:style="[style, fontStyle]">对象语法</div>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        style: {
          color: 'red',
          backgroundColor: 'blue'
        },
        fontStyle: {
          fontSize: '18px'
        }
      }
    });
</script>

总结

本文主要是对 Vue 绑定 class 与 style 方式进行学习与梳理。

Vue 给我们提供了对象绑定和数组绑定 class 与 style 的方式,但是选择哪种绑定方式,在我看来都是在于个人喜好。

我个人更倾向于数据对象的方式去绑定,因为它会让我们的模版看起来更加简介,易于后期代码的维护。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue2.5笔记:Class与Style几种绑定用法

    在我们的项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如我们的网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了...

    六小登登
  • 更好的理解 Script 标签元素

    我们在 《Javascript简史》这遍文章中说过,「Javascript」这门语言是由 Netscape开发而来,当初开发的时候为了能让 「Javascrip...

    六小登登
  • 聊一聊Vue组件模版,你知道它有几种定义方式吗?

    前端组件化开发已经是一个老生常谈的话题了,组件化让我们的开发效率以及维护成本带来了质的提升。

    六小登登
  • Vue2.5笔记:Class与Style几种绑定用法

    在我们的项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如我们的网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了...

    六小登登
  • Python——爬虫入门 Urllib库的使用

    最近在系统的学习Python爬虫,觉得还是比较有意思的,能够干很多的事情,所以也写点文章记录一下学习过程,帮助日后回顾。

    Originalee
  • JavaScript中Date对象的那些事儿

    任何事情都离不开时间,太阳每天升起的时间,每天你上班的时间,中午吃饭时间等等。在编程生涯中,无时无刻都有一个时间来引导,如数据创建时间(createTime),...

    Javanx
  • 只存活了9天,谷歌AI伦理委员会解散了:严重低估员工的战斗力

    部门的全称是先进技术外部咨询委员会 (ATEAC) ,8位成员全部来自谷歌以外,帮助公司面对AI发展中的伦理道德问题。

    量子位
  • WINDOWS7资源管理器不能打开, 该文件没有与之关联的程序来执行操作

    点击导入注册表。Win7下亲测成功!但是导入以后,右键“计算机”弹出菜单会多“Opennewprocess”“opennewwindow”两个项,不完美。后来再...

    卡尔曼和玻尔兹曼谁曼
  • Slice如何从网络消费数据中获得商机

    大数据文摘
  • 『中级篇』Dockerfile实战(19)

    IT故事会

扫码关注云+社区

领取腾讯云代金券