According to the judgment, dynamically bind text and block element alignment css style

 Define the variable TextAlign to control the alignment in the horizontal direction

Define the variable AliginItems to control the vertical alignment

The TextAlign type is 0 1 2 corresponding to left and right

The types of AliginItems are 0 1 2 corresponding to upper and lower

It is required to click on the picture to realize the change of corresponding css 

 <div class="controlStyle">
       <span class="control"> <img @click="TextAlign = '0'"
                                src="@/assets/img/Home/intelligenceBoard/flex-start.png" /> </span>
       <span class="control"> <img @click="TextAlign = '2'"
                                src="@/assets/img/Home/intelligenceBoard/center.png" /> </span>
        <span class="control"> <img @click="TextAlign = '1'"
                                src="@/assets/img/Home/intelligenceBoard/flex-end.png" /></span>
         <span class="control"> <img @click="AlignItems = '0'"
                                src="@/assets/img/Home/intelligenceBoard/direction-start.png" /> </span>
       <span class="control"> <img @click="AlignItems = '2'"
                                src="@/assets/img/Home/intelligenceBoard/direction-center.png" /></span>
        <span class="control"> <img @click="AlignItems = '1'"
                                src="@/assets/img/Home/intelligenceBoard/direction-end.png" /> </span>
                    </div>

css style that defines the alignment

//块级元素对齐方式的css样式
.justify_start{
    justify-content: flex-start;
}
.justify_center{
    justify-content: center;
}
.justify_end{
    justify-content: flex-end;
}
.align_start{
    align-items: flex-start;
}
.align_center{
    align-items: center;
}
.align_end{
    align-items: flex-end;
}

//定义文字对齐方式的css样式
.text_left{
    text-align: left;
    // background-color: #fff;
}

.text_right{
    text-align: right;
    // background-color: black;
}
.text_center{
    text-align: center;
    // background-color: yellow;
}

.text_top{
// background: red;
box-sizing: border-box;
}
.text_bottom{
// background: blue;
padding-top: calc( (var(--height) * 1px - var(--textHeight) * 1px ))  ;
// padding-top: calc( var(--height) * 1px );
// padding-top: calc(#{var(—height)} * 1px);
box-sizing: border-box;
    
}
.text_middle{
// background: greenyellow;
padding-top: calc( (var(--height) * 1px - var(--textHeight ) * 5.5px )) ;
box-sizing: border-box;

    
}

 Implementation method one

ternary expression

Text alignment text-align and padding to control the alignment

:class=[TextAlign=='0'?'text_left':'',TextAlign=='1'?'text_right':'',TextAlign=='2'?'text_center':'', AliginItems=='0' ? 'text_top' :'', AliginItems=='1' ? 'text_bottom' :'', AliginItems=='2' ? 'text_center' :'']

Alignment of block-level elements

 Use flex layout to control alignment and use ternary expressions to display dynamically

:class=[TextAlign=='0'?'justify_start':'',TextAlign=='1'?'justify_end':'',TextAlign=='2'?'justify_center':'', AliginItems=='0' ? 'align_start' :'', AliginItems=='1' ? 'align_end' :'', AliginItems=='2' ? 'align_center' :'']

This writing can be achieved, but the code is cumbersome

Method Two 

js control 

//块级元素
let pGetClass1:any=computed(()=>{

    let classList1:any=['justify_start','justify_end','justify_center']
    let numberList1:any=Number(TextAlign.value)
    let just:any=classList1[numberList1]
    console.log(just)
    return just
})
let pGetClass2:any=computed(()=>{

let classList2:any=['align_start','align_end','align_center']
let numberList2:any=Number(AlignItems.value)
let just:any=classList2[numberList2]
console.log(just)
return just
})
//文字
let getClass1:any=computed(()=>{

    let arr1:any=['text_left','text_right','text_center']

    let num1:any=Number(TextAlign.value)
console.log(arr1,num1);

    let str:any=arr1[num1]
    console.log(str);
    
    return str
})

let getClass2:any=computed(()=>{

let arr2:any=['text_top','text_bottom','text_middle']

let num2:any=Number(AlignItems.value)

let str:any=arr2[num2]
console.log(str);

return str
})

 Bind the corresponding function when style binding

practise

Click to change color

Principle: Find the corresponding unique value identifier, if the ternary judgment ===, add the class name

<template>
    <div style="color:#fff">
   <div  v-for="item in listStyleData" :key="item.pid" 
 :class="['common', IndexOne === item.pid ? 'active':'']" 
   @click="IndexOne=item.pid">
    <div >{
   
   { item.pid }}</div>
</div>

    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const listStyleData=[
    {
        pid:'周一'
    },
    {
        pid:'周二'
    },
    {
        pid:'周三'
    },
    {
        pid:'周四'
    },
    {
        pid:'周五'
    }
]
const IndexOne=ref('')
const add=()=>{
    //暂放
}
</script>

<style scoped>
.common{
    width: 80px;
    height: 80px;
}
.active{
    color:red;
    border:1px solid red;

}
</style>