14、样式绑定之class绑定对象用法

最新推荐文章于 2024-02-21 00:30:47 发布

code_dream_wq

最新推荐文章于 2024-02-21 00:30:47 发布

阅读量476

点赞数

分类专栏： # vue学习

本文链接：https://blog.csdn.net/code_dream_wq/article/details/110171713

版权

vue学习专栏收录该内容

40 篇文章 1 订阅

订阅专栏

- 我们可以给v-bind:class 一个对象，以动态地切换class。
- 注意：v-bind:class指令可以与普通的class特性共存

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active {
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }
    .error {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:class="{active: isActive,error: isError}">
      测试样式
    </div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定

    */
    var vm = new Vue({
      el: '#app',
      data: {
        isActive: true,
        isError: true
      },
      methods: {
        handle: function(){
          // 控制isActive的值在true和false之间进行切换
          this.isActive = !this.isActive;
          this.isError = !this.isError;
        }
      }
    });
  </script>
</body>
</html>

code_dream_wq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
14、样式绑定之class绑定对象用法

- 我们可以给v-bind:class 一个对象，以动态地切换class。- 注意：v-bind:class指令可以与普通的class特性共存<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active { b.
复制链接

扫一扫