vue動态樣式綁定（v-bind，縮寫：）

        在vue項目中對于大量查詢出來的資料有時候會要求根據條件進行不同樣式的展示（一般也就是大屏展示的時候），不可能将相同的代碼進行多次樣式的綁定，利用v-if或者v-show的形式一次展示，這樣一來會顯得代碼非常臃腫，哈哈哈哈，當然看起來也不是很進階，也就是很容易将自己的水準暴露給别人哈，那麼如何解決呢？如下：

1.直接進行style綁定

在标簽上進行樣式綁定

<li  :style="getStyle(item)" v-for="(item,index) in data" :key="index"></li> 
           

然後在methods中去實作它就好了

methods:{

   getStyle(item){

       if(item.active){          //active是用來說明是否是目前元素，目前元素給true

           return {'border':'2px solid #ddb48a',"border-radius": "6px"}

       }

       return {}

   }

}
           

2.動态綁定:class

動态綁定肯定是有條件哒，自然就會想到三元運算法（條件？條件成立時：條件不成立時），它也是一個比較友善而且使用也很頻繁的表達式，那麼就用它啦。

:class="this.validateTextLength(name) > 6 ? 'class1': 'class2'"

順便安利一個判斷字元串長度的方法（注意：漢語與英語是不一樣的），不過這個是我翻譯别人的，連結找不到了，如有不妥敬請見諒。

methods:{

    validateTextLength (value) {

        let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/g

        let mat = value.match(cnReg)

        let length

        if (mat) {

          length = (mat.length + (value.length - mat.length) * 0.5)

          return length

        } else {

          return value.length * 0.5

        }

    }

}