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";

}