学习笔记,颜色搭配不太好,希望各位不要太介意啦
在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";
}