关于vue动态绑定class的样例

关于vue动态绑定class的样例

一、基本的绑定样式

1.对象语法

<div :class="{ active: isActive ，'text-danger': hasError }"></div>

2.数组语法

<div v-bind:class="[activeClass, errorClass]"></div>

3.数组语法中加入对象语法

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

这三种是我们常用的动态绑定的方法

现在简单介绍一下这三种的区别

第一种：

<div :class="{ active: isActive ，'text-danger': hasError }"></div>

用大括号来写，就是对 “isActive”，和 “hasError” 去判断他的真假，在之前没有去细看vue.js的官方文档之前以为就是，对大括号里 ：后面的数据去判断他的真假，true或者false。

data: {
  isActive: true,  //这种情况就是会渲染上active的样式
  hasError:false,  //这种情况就不会渲染上'text-danger'的样式在div上
}
<style>
    .active{
        background-color : red,
    }
</style>

结果渲染为：

<div class="active"></div>

后面经过实验得到了另一种说法；

data: {
  isActive: "",  //这种情况就是会渲染上active的样式
  hasError:"这是hasError",  //这种情况就不会渲染上'text-danger'的样式在div上
}

在这样的数据下，得到的结果为：

<div class="hasError"></div>

active没有被渲染上去，但是这里的 “isActive” 和 "hasError"并不是我们看到的Boolean值。查阅官方文档得到了以下的结论：

1. 对于class是否存在取决于数据 “isActive” 和 "hasError"也就是 ：后的数据的是否为真值(Truthy)，只要是真值，：前面的class样式就会被渲染上去。
2. 真值和假值，所有一切的值都是真值，除非他们被定义为假值（false、0、-0、0n、""、null、underfined、NaN）。除以上的假值外，其他都是真值。详见<Truthy（真值） - 术语表 | MDN (mozilla.org)>

如果是这样的样式：

<div :class="{active}"></div>

active后面没有他的判断条件的的话，他就会去data中去寻找active的真假

data: {
   active:'isactive'
}
<style>
    .isactive{
        background-color : red,
    }
</style>

这时的active为真值，就会将isactive渲染上去

<div class="isactive"></div>

这样的形式就和第二种：ckass的用法有点类似。

第二种

<div v-bind:class="[activeClass, errorClass]"></div>

用中括号来写，表示一种数组形式，就这时候也是去data去判断这两个是否是真值还是假植。

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
<style>
    .active{
        background-color : red,
    }
    .text-danger{
        color:blue,
    }
</style>

这种渲染的效果是：

<div class="active text-danger"></div>

如果这两个都是真值的话，就都会渲染上去。

data: {
  activeClass: 'isactive',
  errorClass: 'text-danger'
}
<style>
    .isactive{
        background-color : red,
    }
    .text-danger{
         background-color : yellow,
    }
</style>

但是如果如果这两个在css种渲染的式样的同一种类型，后面的样式就会将前面的样式掩盖掉，只渲染最后一次的样式。

这时第一次渲染的红色被掩盖了，只留下 'text-danger’的黄色。

第三种

<div :class="[{ active: isActive }, errorClass]"></div>

这种就是结合了前两种的模式，在data中去寻找 “isActive” 和 "errorClass"的真假值，然后去判断是否渲染。

data: {
  isActive: true,
  errorClass: 'text-danger'
}
<style>
    .active{
        background-color : red,
    }
    .text-danger{
        font-size：15px
    }
</style>

这种情况两个就都会渲染出来。

<div class="active text-danger"></div>

还有两种特殊的情况：

一

<div :class="[active]"></div>

data: {
  active:'1',
}
//这样是无效的
<style>
    .1{
       background-color : red,
    }   
</style>
//这样是有效果的
<style>
    .\31{
       background-color : red,
    }  
</style>

后来经过测试得到，如果我们非得用字符串’ 1 ’ 来写，我们在style中需要写成.\31，这个是ASCII中十六进制代表的字符串 ’ 1 '。但是，如果我们改成其他数字字符，就是在31的基础上往上加，超过9的数字字符串就是将第一个数字进行转义，后面的数字可以直接用数字来写。

data: {
  active:'10',
}
//这样是无效的
<style>
    .\31 0{
       background-color : red,
    }  
</style>

二

<div  class="static" :class="[active]"></div>

data: {
  active:1, //直接让这个等于一个值，是无法渲染出来的
}

data: {
  active:ture, //这样也是没有效果的
}

<div  class="static"></div>

经过多次的实验得到，这种写法是无法渲染出css的样式的，想让他渲染出来，必须使用字符串 " " 的形式来写，这个问题我也暂时没有找到结果，等以后找到了结果在来补全这一篇。

小结

1. 关于 :class的用法，{ } 和 [ ]的区别，{ } 一般是去判断在 : 后的值的真假，在css中渲染的时候也是用 : 前的数据去写，而 [ ] 的用法，是在data中去判断他的真假，然后在css的样式的时候，用的是数组的数值在data中等于的某个值去渲染。实例如上代码。
2. 在进行判断时，需要判断的仅为这个数据是真值还是假值，而不在需要让他成为Boolean值中的true或者false。
3. 在将data中的数据等于一个数字字符串时，在style中需要转义字符来\让他可以识别这个是数字字符串，而大于9的数字是将第一个数字进行转义，接下来的数字可以直接写出来。
4. 直接将data中的数据等于一个值，是无法在审查元素中展示出来的，这时候的class为他之前的样式。