Vue——v-bind繫結
阿新 • • 發佈:2019-01-09
學習筆記,顏色搭配不太好,希望各位不要太介意啦
在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";
}