vue.js 动态绑定class

更新日期: 2019-06-29阅读: 2.2k标签: class

1. 数据绑定

vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下:

<a v-bind:href="http://www.cnblogs.com/">博客园首页</a>

简写:
<a :href="http://www.cnblogs.com/">博客园首页</a>

 

2. 动态绑定class

vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量,可以通过 方式设置class,但是vue不推荐这种方式与 v-bind:class 的方式混用,二者只能选其一。v-bind:class 虽然与class属性里绑定变量的方式不能共存,却可以与原生的class特性共存, 一个dom标签中允许同时出现原生class和v-bind:class。


2.1 v-bind:class 支持string类型,不建议这样使用,因为string值是固定不变的,无法实现动态改变class的需求

html代码:
<div :class=" 'classA classB' ">Demo1</div>
渲染后的HTML:
<div class="classA classB">Demo1</div>


2.2 v-bind:class 支持数据变量,当变量值改变时,将同时更新class。v-bind:class指令的值限定为绑定表达式,如javascript表达式

HTML代码:
<div :class="classA">Demo2</div>

Javascript代码:
data: {
  classA: 'class-a'  //当classA改变时将更新class
}
渲染后的HTML:
<div class="class-a">Demo2</div>

写在指令中的值会被视作表达式,如javascript表达式,因此v-bind:class接受三目运算:

HTML代码:
<div :class="classA ? 'class-a' : 'class-b' ">Demo3</div>

渲染后的HTML:
<div class="class-a">Demo3</div>


2.3 v-bind:class 支持对象,对象改变时会动态更新class

HTML代码:
<div :class="{ 'class-a': isA, 'class-b': isB}">Demo4</div>

Javascript代码:
data: {
  isA: false,  //当isA改变时,将更新class
  isB: true    //当isB改变时,将更新class
}
渲染后的HTML:
<div class="class-b">Demo4</div>
HTML代码:
<div :class="objectClass">Demo5</div>

Javascript代码:
data: {
  objectClass: {
    class-a: true,
    class-b: false
  }
}

渲染后的HTML:
<div class="class-a">Demo5</div>



2.4: v-bind:class支持数组, 数组里的变量改变时,会动态更新class列表

HTML代码:
<div :class="[classA, classB]">Demo6</div>

Javascript代码:
data: {
  classA: 'class-a',
  classB: 'class-b'
}

渲染后的HTML:
<div class="class-a class-b">Demo6</div>

数组中可以包含object类型,数组中的object对象改变,也会更新class列表

HTML代码:
<div :class="[classA, classB]">Demo7</div>

Javascript代码:
data: {
  classA: 'class-a',
  objectClass: {
    classB: 'class-b',  // classB 的值为class-b, 则将classB的值添加到class列表
    classC: false,    // classC值为false,将不添加classC
    classD: true    // classD 值为true,classC将被直接添加到class列表
}
}

渲染后的HTML:
<div class="class-a class-b classD">Demo7</div>



链接: https://fly63.com/article/detial/3930

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

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

es6新特性之 class 基本用法

ES6 提供了更接近传统语言的写法,引入了 class(类)这个概念,作为对象的模板。通过class关键字,可以定义类

mixin配合class实现多继承的绝佳妙用

mixin一般翻译为“混入”、“混合”, 早期一般解释为:把一个对象的方法和属性拷贝到另一个对象上;Mixin是一种思想,用来实现代码高度可复用性,又可以用来解决多继承的问题,是一种非常灵活的设计模式

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

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

JS 总结之class

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

class 类 this指向的问题

ES6中的 class定义一个类, 其内部包含 constructor构造函数, 除了在构造函数显示的定义一些属性, 其余的默认都添加到这个类的原型对象上。以上代码 classProxy(prosen2) 返回的是包含一层拦截器的实例对象, 当读取 sayName这个函数的是和会出发 get拦截等操作。

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

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

Class 的私有属性与私有方法

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

ES6 static

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

ES6 class(类)

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

点击更多...

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