Vue根据变量给页面元素动态更换class样式

需求描述：我需要根据父组件传来的一个变量，根据变量值的不同然后给子组件某元素添加不同的样式

1、起初思路

通过监听父组件传过来的变量值发生变化然后，根据值使用 js 的语法直接拿到给页面元素添加不同的class样式；
页面元素：

<div class="el-carousel-Banner"   :visible="isShow" 
	@update:visible="val => $emit('update:visible', val)">
</div>

js:

props: {
        bannerPosition:String
    },
watch: {
        bannerPosition: function(newVal){
            let div = document.getElementsByClassName("el-carousel-Banner")[0];	//拿到页面元素对象
            //现在 div 就是我需要添加 class 样式的元素了
            //下面根据值 动态添加 class 样式
            if(newVal == 'LEFT_DOWN'){
        		div.setAttribute("className", "Banner_LEFT_DOWN");   //加 class 样式
        	}else if(newVal == 'RIGHT_DOWN'){
        		div.setAttribute("className", "Banner_RIGHT_DOWN");   //加 class 样式
			}
    }

css:

.Banner_LEFT_DOWN{
    position: absolute;
    bottom: 10%;
    left: 20%;
}
.Banner_RIGHT_DOWN{
    position: absolute;
    bottom: 10%;
    right: 20%;
}

问题

1、不知道为什么我监听不到 bannerPosition 值的变化，但是其他从父组件传来的值却可以监听到；
2、我使用那个 js 给元素加 class 样式也加不上去；
两个问题还未解决，不知道是什么问题，大佬看见指点一下

最后方案

直接通过 多重 三目运算符 动态加载 class 样式
页面元素：

<div class="el-carousel-Banner"  
    :class="(bannerPosition == 'LEFT_DOWN') ? 'Banner_LEFT_DOWN':  (bannerPosition == 'RIGHT_DOWN') ? 'Banner_RIGHT_DOWN' : ' '" 
    :visible="isShow" @update:visible="val => $emit('update:visible', val)">
</div>

js：

props: {
        bannerPosition:String
    },

css：

.Banner_LEFT_DOWN{
    position: absolute;
    bottom: 10%;
    left: 20%;
}
.Banner_RIGHT_DOWN{
    position: absolute;
    bottom: 10%;
    right: 20%;
}

条条大路通罗马，罗马路上Bug多