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奇跡吧！

 

       很多時候我們的焦慮，是因為太急功近利。

              成功不是一天兩天就能達到的，專心專注！                 

                      時間自會給你答案！