vue之三元表达式 快来get吧！

简单直接，上干货！！！

class样式绑定

动态绑定类名（方法一）

       sexFlag为true，类名则为pink；反之,为blue。

       <el-button type="submit" @click="changeSex">改变性别</el-button>
       <div class="container">
                <h5>男或女(二选一)</h5>
                <p :class="sexFlag?'pink':'blue'">{{sexText}}</p>
       </div>

　　

 changeSex() {
        this.sexFlag = !this.sexFlag;
        this.sexText = this.sexFlag ? '女--粉' : '男--蓝'
  },
                  

 

动态绑定类名（方法二）　

<h5>动态激活选中样式</h5>
<div :class="{active: isActive}" @click="isActive = !isActive"><span v-show="!isActive">未</span>激活</div>

 

动态绑定类名（方法三）　

<span @click="isActiveTwo = !isActiveTwo">点击</span>
<span v-bind:style="{display:isActiveTwo?'block':'none'}">文本展示</span>

 

动态绑定类名（方法四---字符串拼接）

　　

<span :class="'stringConcat '+(isActiveThree?'yes':'no')"
                      @click="isActiveThree = !isActiveThree">展示1</span>
<span :class="'stringConcat'+(isActiveThree?' yes':' no')"
                      @click="isActiveThree = !isActiveThree">展示2</span>

      大家看这两行代码，观察到什么了吗？又发现有什么不同吗？

       ps:细心的同学会注意到 空格的存在；（位置可以调整哦，stringConcat 此时加了单引号，为字符串；isActiveThree则为变量）

 

动态绑定类名，多类名的情况

<div class="container">
     <h5>1岁以内,标下划线</h5>
     <div v-show="sexFlag">
          <p :class="[ageVal<=1? 'underLine':'',sexFlag?'pink':'']">女-文字-粉色</p>
     </div>
     <div v-show="!sexFlag">
          <p :class="[ageVal<=1? 'underLine':'',sexFlag?'':'blue']">男-文字-蓝色</p>
     </div>
</div>

　　

<div class="container">
       <h5>1岁以内,标下划线</h5>
       <div v-show="sexFlag">
            <p :class="[ageVal>1? '':sexFlag?'plum':'', 'fontWeiNum']">女---性别</p>
       </div>
       <div v-show="!sexFlag">
            <p :class="[ageVal>1? '':sexFlag?'':'steelblue', 'fontWeiNum']">男---性别</p>
       </div>
</div>

 

 

三元表达式之赋值，判断

<el-select v-model="inputValOpt" @change="changeSelect" placeholder="请选择">
        <el-option
                 v-for="item in optionsType"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
         </el-option>
</el-select>
<el-input type="text" v-model="inputVal" :disabled="!!inputVal" placeholder="请输入"/>

            changeSelect() {
                this.inputValOpt == 1 ?
                    this.inputVal = '' :
                    this.inputValOpt == 2 ?
                        this.inputVal = undefined :
                        this.inputValOpt == 3 ?
                            this.inputVal = null :
                            this.inputValOpt == 4 ?
                                this.inputVal = 'songhuanhuan' :
                                this.inputValOpt == 5 ?
                                    this.inputVal = 8 : ''
            }

　　是不是很惊喜，代码简洁漂亮，同时又兼容了各种情况，快去get奇迹吧！

 

       很多时候我们的焦虑，是因为太急功近利。

              成功不是一天两天就能达到的，专心专注！                 

                      时间自会给你答案！