Vue.js入门：使用vue.js动态绑定class

最新推荐文章于 2024-07-06 21:38:14 发布

zykhenu

最新推荐文章于 2024-07-06 21:38:14 发布

阅读量654

点赞数

分类专栏：其他文章标签： Vue.js Vue JS 前端

本文链接：https://blog.csdn.net/zykhenu/article/details/84332638

版权

其他专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用vue.js给DOM节点动态绑定class

vue.js利用自身双向绑定的优势，使我们为DOM节点动态添加删除类容易了很多。——或许比用原生JavaScript简单了一倍，当然，这也需要一点点学习成本。
话不多说，我们直接开始。

首先，我们创建一个html文件，然后引入vue.js。

<script type="text/javascript" src="js/vue.js"></script>

接着，在body中写两个div

<div class="box">光明</div>
 <div class="box">黑暗</div>

添加一个类

.box {
   display: inline-block;
   width: 100px;
   height: 100px;
   margin: 50px;
   text-align: center;
   line-height: 100px;
   font-size: 25px;
   background: #cecece;
   border: 2px solid #951161;
   cursor: pointer;
 }

然后我们会得到这样一个页面：
在这里插入图片描述

接着，创建一个我们需要动态添加的类，例如：

.change {
   background: #f16565;
 }

接下来到了重点部分，JS代码。
注意，自己的 js代码和引入的 vue.js代码需要写在两个 script标签中。

创建vue实例，并在data中定义一个记录状态的active字段：

var vm = new Vue({
        el: '#app',
        data: {
          active: 0
        }
    })

然后就是给两个div标签添加v-bind指令：

<div class="box" v-bind:class="{change:active==0}">光明</div>
<div class="box" v-bind:class="{change:active==1}">黑暗</div>
// v-bind:指令也可以简写成:,如下
<div class="box" :class="{change:active==0}">光明</div>
<div class="box" :class="{change:active==1}">黑暗</div>

上面的代码大概意思是，当active=0时，给第一个div添加类.change，当active=1时，给第二个div添加类 .change。

接下来，我们只需要给每个div添加点击事件。事件需要写在methods属性中。

methods: {
   selectClass (index) {
        this.active = index;
    }
  }

我们已经写好了一个事件selectClass，并需要给他传一个参数，而这个参数将会被赋值给active，还记得上面的v-bind指令吗？

<div class="box" :class="{change:active==0}">光明</div>
<div class="box" :class="{change:active==1}">黑暗</div>
// 当active=0时，给第一个div添加类.change，当active=1时，给第二个div添加类 .change

最后，我们只要给每个div添加这个点击事件，并传入参数

<div class="box" v-on:click="selectClass(0)" v-bind:class="{change:active==0}">光明</div>
<div class="box" v-on:click="selectClass(1)" v-bind:class="{change:active==1}">黑暗</div>
// v-on:指令也可以简写为@，如下：
<div class="box" @click="selectClass(0)" :class="{change:active==0}">光明</div>
<div class="box" @click="selectClass(1)" :class="{change:active==1}">黑暗</div>

现在，一段使用vue.js动态绑定class的代码就完成了，点击每个div，都会添加一个 .change类。active默认值为0，所以默认选择的是“光明”（心向光明~）。
在这里插入图片描述

全部代码在这里：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
      .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 50px;
        text-align: center;
        line-height: 100px;
        font-size: 25px;
        background: #cecece;
        border: 2px solid #951161;
        cursor: pointer;
      }
      .change {
        background: #f16565;
      }
    </style>
</head>

<body>
    <div id="app">
      <div class="box" @click="selectClass(0)" :class="{change:active==0}">光明</div>
      <div class="box" @click="selectClass(1)" :class="{change:active==1}">黑暗</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      var vm = new Vue({
        el: '#app',
        data: {
          active: 0
        },
        methods: {
          selectClass (index) {
              this.active = index;
          }
        }
    })
    </script>
</body>

</html>

这里是一些vue入门的小玩意，下次我们说说v-for。