为啥Vue的三元表达式切换Class失灵

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为啥Vue的三元表达式切换Class失灵相关的知识,希望对你有一定的参考价值。

参考技术A span class="send_box" :class=" isDisabled ? 'notSend' : 'send' " v-touch:tap="sendUserQuestion">发送</span>

/**
* 计算属性没有问题,能够正常返回 isDisabled 的 true or false, 但是 html class 没有实时切换为什么?
*/
computed:
isDisabled ()
if (this.userQuestion !== '')
return false
else
return true

,
本回答被提问者采纳

vue动态绑定class

参考技术A 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

vue官方文档对于class和style绑定有两种方法,对象语法和数组语法。

1.绑定 HTML Class对象绑定

我们用传给v-bind:class 一个对象,动态切换class 是否存在

<div v-bind:class=" active: isActive "></div> ; //这里我们使用isActive 这个变量动态判断active是否显示到html

vue对象里面

data:

isActive:true,//判断是否显示active这个class



页面渲染为:

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

当然我们也可以对象中传入更多属性来动态切换多个 class,此外,v-bind:class 指令也可以与普通的 class 属性共存。

<div class="static" v-bind:class=" active: isActive, 'text-danger': hasError ">  动态切换多个 class</div>

vue对象里面

data:

isActive:true,

hasError:false



页面渲染为:

<div class="static active">  动态切换多个 class</div>

对于上面v-bind:class 指令我们也可以传一个对象

<div v-bind:class="classObject">动态切换多个 class</div>

data:

  classObject:

    active: true,

    'text-danger': false

 



页面渲染为:

<div class="active">  动态切换多个 class</div>

对于动态class绑定我们也可以通过计算属性返回对象来动态判断class的绑定值

<div v-bind:class="classObject"></div>

data:

  isActive: true,

  error: null

,

computed:

  classObject: function ()

    return

      active: this.isActive && !this.error,

      'text-danger': this.error && this.error.type === 'fatal'

   

 



2.绑定 HTML Class数组语法

除了对象语法绑定class,我们还有一种方法是数组语法,我们可以把一个数组传给 v-bind:class。

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

data:

  activeClass: 'active',

  errorClass: 'text-danger'



页面渲染为

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

我们也可以通过三元表达式来进行判断切换class:

<div v-bind:class="[isActive ? activeClass : ' ', errorClass]"></div>  ;//这里判断是如果isActive 为true显示activeClass ,errorClass,否则只显示errorClass

对于class绑定当有多个条件 class 时这样写有些繁琐,在数组语法中也可以使用对象语法。

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

以上是关于为啥Vue的三元表达式切换Class失灵的主要内容,如果未能解决你的问题,请参考以下文章

vue中 :style 与 :class 三元运算符使用

vue2.x中使用三元表达式绑定class的时候遇到的坑

ng-click中的三元表达式在angularjs中

Vue实现多个按钮切换样式

vue 绑定class的方式

JavaScript - 为啥包含括号会导致三元表达式错误?