vue动态绑定class与style总结

时间: 2020-06-29阅读: 70标签: class

有的东西,看似简单,实则不简单,还是要多总结,在真实项目当中予以应用。

vue当中绑定class和style的方式有很多种,基本都知道,但是在项目当中真正遇到需要用样式变化呢的场景却怎么也想不起来,很模糊,只能写一些简单地样式逻辑,今天来总结一下vue中动态绑定样式的情况。


demo01:

点击激活按钮flag变量取反,切换div class类名应用isActive类或者不应用isActive类。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .isActive {
    background: red
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <div :class="{'isActive':flag}">
      我是一个div
    </div>
    <button @click="flag=!flag">激活</button>
  </div>
</body>
<script>
  var app = new vue({
    el: "#app",
    data() {
      return {
        flag: false
      }
    },

  })
</script>

</html>


demo02:

两个按钮分别对isred和isblue变量做取反,盒子本来有个类名circle,动态添加isred和isblue类,class和:class可以共存

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 22:41:24
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 22:49:16
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .isActive {
    background: red
  }

  .bg-red {
    background: red;
  }

  .text-blue {
    color: blue
  }

  .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <div class="circle" :class="{'bg-red':isred,'text-blue':isblue}">
      我是一个div
    </div>
    <button @click="isred=!isred">激活</button>
    <button @click="isblue=!isblue">激活</button>
  </div>
</body>
<script>
  var app = new vue({
    el: "#app",
    data() {
      return {
        isred: false,
        isblue: false
      }
    }
  })
</script>

</html>


demo03: 

当:class的表达式过长或逻辑复杂时,还可以绑定一个计算属性,一般当条件多余2个时,都可以使用data或者computed,例如使用计算属性:

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:03:05
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:10:22
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .active {
    color: blue;
    background: red;
  }

  .error-info {
    color: black;
    background: #ccc;
  }

  .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <div class="circle" :class="classes">
      我是一个div {{isred}} {{isblue}}
    </div>
    <button @click="isred=!isred">激活</button>
    <button @click="isblue=!isblue">激活</button>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        isred: false,
        isblue: false
      }
    },
    computed: {
      classes() {
        return {
          active: this.isred && this.isblue,
          'error-info': !this.isred && !this.isblue,
        }
      }
    }

  })
</script>

</html>


demo04 

盒子拥有多个类名,则用数组语法标识 注意:带中划线的类型需要加引号!

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:03:05
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:21:53
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .red {
    background: red;
  }

  .text-blue {
    color: blue
  }

  .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <div :class="[red,'text-blue',circle]">
      我是一个div
    </div>

  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        red: 'red',
        'text-blue': 'text-blue',
        circle: 'circle'
      }
    },
    computed: {

    }

  })
</script>

</html>

 

demo05 

数组语法配合三元表达式或者对象语法 注:第一种三元表达式和第二种对象语法效果是一样的

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:03:05
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:26:56
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .red {
    background: red;
  }

  .text-blue {
    color: blue
  }

  .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <div :class="[isred? red:'','text-blue',circle]">
      我是一个div
    </div>

    <div :class="[{'red':isred},'text-blue',circle]">
      我是一个div
    </div>
    <button @click="isred=!isred"></button>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        red: 'red',
        'text-blue': 'text-blue',
        circle: 'circle',

        isred: false
      }
    },
    computed: {

    }

  })
</script>

</html>


demo06 

利用计算属性动态生成盒子类名,通过下拉框控制btn-large btn-middle btn-small的切换,通过disabled变量控制btn-disabled的添加与移除。

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:33:25
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:42:28
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .btn-disabled {
    background: #aaa;
  }

  .btn-large {
    width: 200px;
    height: 80px;
  }

  .btn-middle {
    width: 120px;
    height: 60px;
  }

  .btn-small {
    width: 80px;
    height: 50px;
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <button :class="dynamicClass">我是动态按钮</button>
    <select v-model="size">
      <option value="">请选择</option>
      <option value="large">大</option>
      <option value="middle">中</option>
      <option value="small">小</option>
    </select>
    <button type="button" @click="disabled=!disabled">切换动态按钮是否禁用</button>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        size: '',
        disabled: true
      }
    },
    computed: {
      dynamicClass() {
        return [
          'btn',
          {
            ['btn-' + this.size]: this.size !== "",
            ['btn-disabled']: this.disabled
          }
        ]
      }
    }

  })
</script>

</html>


demo07 

绑定在组件上 注:组件上绑定的class会渲染到组件根元素上!

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:33:25
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:53:27
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .red {
    color: red
  }

  .fontClass {
    font-size: 55px
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <my-component :class="{'red':isred}"></my-component>
    <button @click="isred=!isred">点击切换</button>
  </div>
</body>
<script>
  Vue.component("my-component", {
    template: "<p>我是一段文本</p>"
  })
  var app = new Vue({
    el: "#app",
    data() {
      return {
        isred: false
      }
    },
    computed: {
    }

  })
</script>

</html>


demo08 

内联样式,也有数组语法,对象语法,复杂且长可以写到data或computed中

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:33:25
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-28 00:05:16
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<body>
  <div id="app">
    <div>
      <el-color-picker v-model="color"></el-color-picker>
      <div :style="{'color':color,'fontSize':fontSize+'px'}">内联style</div>
      <button @click="fontSize++">加大字号</button>
    </div>
  </div>
</body>
<script>

  var app = new Vue({
    el: "#app",
    data() {
      return {
        color: null,
        fontSize: 12
      }
    },
    computed: {
    }

  })
</script>

</html>
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9531

关闭

ES6 static

ES6中新增了class这个语法糖。此class并非java中的class,ES6中的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。其中有static关键字。

classList介绍和原生JavaScript实现addClass、removeClass等

使用jQuery可以给元素很方便的添加class和删除class等操作,现在原生的JavaScript也可以实现这个方法了。使用classList可以方便的添加class、删除class、查询class等。elementClasses 是一个 DOMTokenList 表示 element 的类属性 。

Class:向传统类模式转变的构造函数

JS基于原型的类,一直被转行前端的码僚们大呼惊奇,但接近传统模式使用class关键字定义的出现,ES6的class只是个语法糖,其定义生成的对象依然构造函数。不过为了与构造函数模式区分开,我们称其为类模式。

JS 总结之class

class 是 ES6 的新特性,可以用来定义一个类,实际上,class 只是一种语法糖,它是构造函数的另一种写法。用法和使用构造函数一样,通过 new 来生成对象实例

ES6 class(类)

class (类)作为对象的模板被引入,可以通过 class 关键字定义类。类简要说明,类的本质是function,是基本原型继承的语法糖。所以,JS中继承的模型是不会被改变的。

你需要知道的 JavaScript 类(class)的这些知识

JavaScript 使用原型继承:每个对象都从原型对象继承属性和方法。在Java或Swift等语言中使用的传统类作为创建对象的蓝图,在 JavaScript 中不存在,原型继承仅处理对象。

vue.js 动态绑定class

vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下;vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量,可以通过 方式设置class

Class 的私有属性与私有方法

proposal-class-fields与proposal-private-methods定义了 Class 的私有属性以及私有方法,这 2 个提案已经处于 Stage 3,这就意味着它们已经基本确定下来了,等待被加入到新的 ECMAScript 版本中。

ES6 class创建对象和传统方法生成对象的区别

JS语言传统创建对象的方法一般是通过构造函数,来定义生成的,下面是一个使用function生成的例子。ES5是先新建子类的实例对象this,再将父类的属性添加到子类上,由于父类的内部属性无法获取,导致无法继承原生的构造函数

ES6 class继承与super关键词深入探索

在ES6版本之前,JavaScript语言并没有传统面向对象语言的class写法,ES6发布之后,Babel迅速跟进,广大开发者也很快喜欢上ES6带来的新的编程体验。当然,在这门“混乱”而又精妙的语言中,许多每天出现我们视野中的东西却常常被我们忽略。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广