• Vue的class绑定总结


    class绑定对象

    class绑定对象的操作方式;

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
        .active {
          border: 1px solid red;
           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>
    
    

    class绑定数组

    class绑定数组的操作方式;

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
        .active {
          border: 1px solid red;
           100px;
          height: 100px;
        }
        .error {
          background-color: orange;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <div v-bind:class='[activeClass, errorClass]'>测试样式</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: {
            activeClass: 'active',
            errorClass: 'error'
          },
          methods: {
            handle: function(){
              this.activeClass = '';
              this.errorClass = '';
            }
          }
        });
      </script>
    </body>
    </html>
    
    

    class绑定细节

    class绑定的细节;

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
        .active {
          border: 1px solid red;
           100px;
          height: 100px;
        }
        .error {
          background-color: orange;
        }
        .test {
          color: blue;
        }
        .base {
          font-size: 28px;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>
        <div v-bind:class='arrClasses'></div>
        <div v-bind:class='objClasses'></div>
        <div class="base" v-bind:class='objClasses'></div>
    
        <button v-on:click='handle'>切换</button>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          样式绑定相关语法细节:
          1、对象绑定和数组绑定可以结合使用
          2、class绑定的值可以简化操作
          3、默认的class如何处理?默认的class会保留
          
        */
        var vm = new Vue({
          el: '#app',
          data: {
            activeClass: 'active',
            errorClass: 'error',
            isTest: true,
            arrClasses: ['active','error'],
            objClasses: {
              active: true,
              error: true
            }
          },
          methods: {
            handle: function(){
              // this.isTest = false;
              this.objClasses.error = false;
            }
          }
        });
      </script>
    </body>
    </html>
    
    
  • 相关阅读:
    C# 保存base64格式图片
    C# 日期比较
    Socket的使用
    地质演变完整事记
    计算机实用的使用技巧
    ebook 电子书项目
    ppt演讲者模式
    IT行业三大定律
    史前生命
    Oracle DataGuard发生归档丢失增量备份恢复备库
  • 原文地址:https://www.cnblogs.com/apebro/p/12602244.html
Copyright © 2020-2023  润新知