vue学习-数据绑定-操作元素的class列表

vue官网教程

（1）vue 官网教程：cn.vuejs.org/v2/guide/

（2）数据绑定-操作元素class 教程： cn.vuejs.org/v2/guide/cl…

下面的code是针对（2）的学习笔记，假设前提是（2）之前的教程已经学过了。

code 示例

下面这段代码，直接拷贝可用，结合教程，自己敲一遍，会有意想不到的收获。

app1和header标签

<div id="app1" v-bind:class="{ active: isActive }"></div>
<div id="app2" class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<div id="app3" v-bind:class="classObject"></div>
<div id="app4" v-bind:class="classObject"></div>
<div id="app5" v-bind:class="[activeClass, errorClass]"></div>
<div id="app6"
     v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div id="app7" v-bind:class="[{ active: isActive }, errorClass]"></div>

// vue component
<div id="app8">
  <my-component class="baz1 foo1"></my-component>
</div>
<div id="app9">
  <my-component v-bind:class="{ active: isActive }"></my-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  // here component must be declared before app8 and app9
  Vue.component('my-component', {
    template: '<p class="foo bar">Hi, Vue!</p>'
  });

  var app9 = new Vue({
    el: '#app9',
    data: {
      isActive: false
    }
  });

  var app8 = new Vue({
    el: '#app8'
  });

  var app7 = new Vue({
    el: '#app7',
    data: {
      isActive: true,
      errorClass: 'text-danger'
    }
  });

  var app6 = new Vue({
    el: '#app6',
    data: {
      isActive: false,
      activeClass: 'active',
      errorClass: 'text-danger'
    }
  });

  var app5 = new Vue({
    el: '#app5',
    data: {
      activeClass: 'active',
      errorClass: 'text-danger'
    }
  });

  var app4 = new Vue({
    el: '#app4',
    data: {
      isActive: true,
      error: null
    },
    computed: {
      classObject: function() {
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
      }
    }
  });

  var app3 = new Vue({
    el: '#app3',
    data: {
      classObject: {
        active: true,
        'text-danger': false
      }
    }
  });

  var app2 = new Vue({
    el: '#app2',
    data: {
      isActive: true,
      hasError: false
    }
  });

  var app1 = new Vue({
    el: '#app1',
    data: {
      isActive: true
    }
  });
</script>
复制代码

浏览器调试：

上面代码在浏览器直接打开，div元素app1~app9 class如下图：

在控制台修改参数，app1~4,app6,app9 class 变化如下图：

gitee代码提交

参考”gitee 第一次使用建仓库和本地提交”: juejin.cn/post/697492…,

gitee上建立一个vue-test仓库

命令行：git add, git commit, git push

gitk命令查询代码提交记录

一个很棒的git自学网址： www.liaoxuefeng.com/wiki/896043…

命令行输入： gitk

gitk提交记录

学vue心得，教程不能光看，得跟着示例一起写，code多敲几次，其意自现。不能一看就会，一写就废。

#第一次学习vue，如有不对，欢迎指正、讨论、改进、学习一条龙服务#