vue3 动态样式，即通过一些变量来改变样式的值，并显示。

vue官网的样式处理：

https://cn.vuejs.org/guide/essentials/class-and-style.html

1、一般样式：

<div style="margin-top:  20px;background-color:#ff0000;">一般样式</div>

2、如果上面的一般样式，要改变margin-top的值，那就应该是这样：

<div :style="{marginTop:  `${viewHeight - 400 }px` }">{{viewHeight}}</div>

const viewHeight = ref(0);

nextTick(() => {
						viewHeight.value = document.documentElement.clientHeight;
					})

3、通过下面的方法也可以动态设置，在代码中就可以：

const state = reactive({
					divStyle: {
						width: '90%', margin: '30px', height: '500px'
					}
				});

nextTick(() => {
						viewHeight.value = document.documentElement.clientHeight;
						// console.log('height:', viewHeight.value)
						state.divStyle.height = (viewHeight.value - 150)+ 'px';
					})

:style="divStyle"

return {
					msg,
					viewState,
					viewHeight,
					...toRefs(state),
					btnClick() {
						console.log(msg.value);
						msgClick();
					}
				}