5.绑定 HTML Class

未匹配的标注
  • 本系列文章为laracasts.com 的系列视频教程——Learn Vue 2: Step By Step 的学习笔记。若喜欢该系列视频,可去该网站订阅后下载该系列视频,支持正版
  • 视频源码地址:github.com/laracasts/Vue-Forms
  • 项目初始版本为Vue 2.1.3,教程还在更新中。

本节说明

  • 对应第 5 小节:Attributes and Class Name Binding

本节内容

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

index.html

<!DOCTYPE html>

<html>
    <head>
        <style>
            .is-loading{
                background: red;
            }
        </style>
    </head>

    <body>
        <div id="root">
            <button :class="{ 'is-loading' : isLoading }">Click me</button>
        </div>

        <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>

        <script>
            var app = new Vue({
                el:'#root',

                data: {
                    isLoading:false,
                }
            });
        </script>
    </body>
</html>

注::class 为 v-bind:class 的简写方式

注意下面这行代码:

<button :class="{ 'is-loading' : isLoading }">Click me</button>

上面的语法表示 is-loading 这个 class 存在与否将取决于数据属性isLoadingtrue还是false。我们默认为false,当我们改为true时,class 会生效。我们查看效果:
file
接下来我们点击按钮添加 class :

.
.
<body>
        <div id="root">
            <button :class="{ 'is-loading' : isLoading }" @click="toggleClass">Toggle class</button>
        </div>

        <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>

        <script>
            var app = new Vue({
                el:'#root',

                data: {
                    isLoading:false,
                },

                methods:{
                    toggleClass() {
                        this.isLoading = true;
                    }
                }
            });
        </script>
    </body>

查看效果:
file

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~