1. 程式人生 > >Vue——v-bind繫結

Vue——v-bind繫結

學習筆記,顏色搭配不太好,希望各位不要太介意啦

    在Vue中可使用v-bind為屬性繫結從.ts中定義的變數

1.Class 與 Style 繫結

interface.vue

(1)繫結指定的class名   v-bind:可直接寫為:

<span v-bind:class="[tableList.row.Circle, tableList.row.Complete1]">1</span>

(2)繫結class是否使用,active為樣式名,isActive可在.ts檔案中定義為true或false

<div class="static"
     v-bind:class="{ active: isActive}">
</div>

interface.ts

private tableList = [{Circle:"circle",Complete1:"complete"}];

circle和complete為class名設計的樣式,具體寫法這裡就不做過多的解釋了

 

2.按鈕type的繫結

interface.vue

<el-button v-bind:type="isDirector" @click="director">主管</el-button>

interface.ts

private isDirector = "success";

private director() {

this.isDirector = "info";

}