12-----鎸囦护绯荤粺浠嬬粛

Posted 2020-12-24

褰?nbsp;v-if 涓?nbsp;v-for 涓€璧蜂娇鐢ㄦ椂锛?strong>v-for 鍏锋湁姣?v-if 鏇撮珮鐨勪紭鍏堢骇銆?/p>

 

浜屻€乧lass涓巗tyle缁戝畾

v-bind                                            

鎿嶄綔鍏冪礌鐨?class 鍒楄〃鍜屽唴鑱旀牱寮忔槸鏁版嵁缁戝畾鐨勪竴涓父瑙侀渶姹傘€傚洜涓哄畠浠兘鏄睘鎬с€傛墍浠ユ垜浠彲浠ョ敤 v-bind 澶勭悊瀹冧滑锛氬彧闇€瑕侀€氳繃琛ㄨ揪寮忚绠楀嚭瀛楃涓茬粨鏋滃嵆鍙€備笉杩囷紝瀛楃涓叉嫾鎺ラ夯鐑︿笖鏄撻敊銆傚洜姝わ紝鍦ㄥ皢 v-bind 鐢ㄤ簬 class 鍜?nbsp;style 鏃讹紝Vue.js 鍋氫簡涓撻棬鐨勫寮恒€傝〃杈惧紡缁撴灉鐨勭被鍨嬮櫎浜嗗瓧绗︿覆涔嬪锛岃繕鍙互鏄璞℃垨鏁扮粍銆?/p>

姣斿鎴戜滑鍙互

  缁戝畾瀛楃涓?nbsp;                                  

<span v-bind:title=鈥榯ime鈥?/span>>榧犳爣鎮仠鍑犵鍚庡綋鍓嶆椂闂?span style="color: #0000ff"></span>

data:{
    time: `椤甸潰鍔犺浇浜?{new Date().toLocaleString()}`,
}

 

 

  缁戝畾html Class                             

鎴戜滑鍦╦s涓父鐢ㄦ搷浣渄om鐨刢ss鏍峰紡灞炴€х殑鏂规硶鏈夊緢澶氾紝鍦╲ue涓彲浠ョ洿鎺ヤ娇鐢╲-bind:class鏉ョ粰姣忎釜鏍囩鍏冪礌娣诲姞class銆?/p>

 

瀵硅薄璇硶

鎴戜滑鍙互浼犵粰 v-bind:class 涓€涓璞★紝浠ュ姩鎬佸湴鍒囨崲 class锛?/p>

...
data:{
   isRed:true  
}

<div v-bind:class=鈥榹box1:isRed}鈥?/span>></div>

鏁堟灉濡備笅锛?/p>

濡傛灉鏈夋寜閽殑璇濓紝鎴戜滑鍙互閫氳繃鐐瑰嚮鎸夐挳鍔ㄦ€佺殑鍒囨崲class銆傛澶栵紝v-bind:class 鎸囦护涔熷彲浠ヤ笌鏅€氱殑 class 灞炴€у叡瀛?/p>

<div class=鈥榓鈥?v-bind:class=鈥榹box1:isRed,box2:isGreen}鈥?/span>></div>

鍜屽涓媎ata锛?/p>

data:{
  isRed:true,
  isGreen:fasle    
}

 鏁堟灉濡備笅锛?/p>

 

鏈夎繖涔堜竴涓猚ss鏍峰紡锛?/p>

.box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: green;
        }

 

 閭ｄ箞鎴戜滑鍦ㄦ枃妗ｇ粨鏋勪腑鍙互鍔犱竴涓?/p>

<button v-on:click =鈥榗lickHandler鈥?/span>>鍒囨崲</button>

浣跨敤v-on缁戝畾js涓墍鏈夌殑浜嬩欢銆傝繖閲屾垜浠槸缁戝畾浜嗙偣鍑讳簨浠躲€傦紙鍚庨潰浼氫粙缁嶏級

鍦ㄥ疄渚嬪寲options鍙傛暟涓坊鍔犲涓嬮厤缃細

methods:{
    clickHandler(){
        this.isGreen = !this.isGreen;
    }
}

 

 

鏁扮粍璇硶

鎴戜滑鍙互鎶婁竴涓暟缁勪紶缁檝-bind:class,浠ュ簲鐢ㄤ竴涓?class 鍒楄〃锛?/p>

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

 

data: {
  activeClass: 鈥榓ctive鈥?
  errorClass: 鈥榯ext-danger鈥?}

 

娓叉煋涓猴細

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

 

濡傛灉浣犱篃鎯虫牴鎹潯浠跺垏鎹㈠垪琛ㄤ腑鐨?class锛屽彲浠ョ敤涓夊厓琛ㄨ揪寮忥細

<div v-bind:class="[isActive ? activeClass : 鈥樷€? errorClass]"></div>

 

杩欐牱鍐欏皢濮嬬粓娣诲姞 errorClass锛屼絾鏄彧鏈夊湪 isActive 鏄?true鏃舵墠娣诲姞 activeClass銆?/p>

涓嶈繃锛屽綋鏈夊涓潯浠?class 鏃惰繖鏍峰啓鏈変簺绻佺悙銆傛墍浠ュ湪鏁扮粍璇硶涓篃鍙互浣跨敤瀵硅薄璇硶锛?/p>

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

 

 

涓夈€佷簨浠跺鐞?/span>

  鐩戝惉浜嬩欢                             

鍙互鐢?nbsp;v-on 鎸囦护鐩戝惉 DOM 浜嬩欢锛屽苟鍦ㄨЕ鍙戞椂杩愯涓€浜?JavaScript 浠ｇ爜銆?/p>

1 <div id=鈥榓pp鈥?/span>>
2     <button v-on:click = 鈥榗ount+=1鈥?/span>>鍔爗{count}}</button>
3     <p>鐐逛簡{{count}}娆?span style="color: #0000ff"></p>
4 </div>

 

var app = new Vue({
    el:鈥?app鈥?
    data:{
       count:0 
    } 
})

 

缁撴灉涓猴細褰撴垜鐐瑰嚮鐨勬寜閽殑鏃跺€欙紝涓嬮潰p鏍囩鐨勬暟鎹篃浼氬彂鐢熷彉鍖栵紝鍚屾椂button鐨勬枃瀛椾篃浼氬彂鐢熷彉鍖栥€?/p>

  浜嬩欢澶勭悊鏂规硶                       

鐒惰€岃澶氫簨浠跺鐞嗛€昏緫浼氭洿涓哄鏉傦紝鎵€浠ョ洿鎺ユ妸 javascript 浠ｇ爜鍐欏湪 v-on 鎸囦护涓槸涓嶅彲琛岀殑銆傚洜姝?nbsp;v-on 杩樺彲浠ユ帴鏀朵竴涓渶瑕佽皟鐢ㄧ殑鏂规硶鍚嶇О

1 <div id=鈥榓pp鈥?/span>>
2     <button v-on:click = 鈥榗ountClick鈥?/span>>鍔爗{count}}</button>
3     <p>鐐逛簡{{count}}娆?span style="color: #0000ff"></p>
4 </div>