vue绑定class的几种方式

作者: 白雪公主960 | 来源:发表于2018-10-24 16:52 被阅读127次

vue绑定class的几种方式
Vue入门：v-bind
vue动态绑定class的几种方式
vue 动态绑定class的几种方式
vue动态绑定class的几种方式
vue动态绑定class的几种方式
vue动态绑定class的几种方式
Vue.js 绑定 class 的几种方式
动态绑定 class 的几种实现方式 - Vue
4.v-bind以及class与style的绑定

1.对象语法

vue文件中

<div :class="{'active':isActive}">

js文件中

export default {
  data() {
    return {
      isActive:true    
    };
  } 
};

类名active依赖于数据isActive,当其为true时，div就会拥有类名active,为false时则没有类名active。

<div class="static" :class="{'active':isActive,'error':isError}">

js文件中

export default {
  data() {
    return {
      isActive:true,
      isError:false,
    };
  } 
};

对象可传入多个属性来动态的切换class,也可以与普通的class共存。

2.数组语法

下面这个不是很常用吧

vue绑定class的几种方式
1.对象语法 vue文件中 js文件中类名active依赖于数据isActive,当其为true时，div就会拥...
Vue入门：v-bind
本篇为Vue的基础篇，主要关于 v-bind: class与style的动态绑定。 1. 绑定 class 的几种...
vue动态绑定class的几种方式
对象方法 -最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染）判断是否绑定一个active...
vue 动态绑定class的几种方式
写在前面其实这个方式vue.js官网就有，而且记录的挺详细的，如果想更清楚的了解请移步vue.js Class ...
vue动态绑定class的几种方式
一、对象方法 1、最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染） html部分： j...
vue动态绑定class的几种方式
对象方法-最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染）判断是否绑定一个active ...
vue动态绑定class的几种方式
1、对象方法最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染）判断是否绑定一个activ...
Vue.js 绑定 class 的几种方式
上例子中，类名active依赖于数据isActive，当其为true时，div会拥有类名Active，为 fals...
动态绑定 class 的几种实现方式 - Vue
日常开发中难免会遇到动态渲染修改样式的需求出现，So 简单归纳如下三种实现方式，虽然还是学时的时候有所了解但事后很...
4.v-bind以及class与style的绑定
4.1.绑定class 的几种方式 4.1.1.对象语法绑定class对象语法：对象的键是类名，值是布尔值当 ...