vue 动态改变css不能立刻呈现?

Question

 代码如下:
            <dl>
                <dd id="menuLevel1" v-for="item in menuShowList"
                    :class="{'oneMenuLevel': !item.menuSelected ,'oneMenuLevelFloat':item.menuSelected}"
                    @mouseover="oneMenuLevelOver(item)"
                >
                     {{item.title}}
                </dd>
            </dl>
            

js代码如下:

        oneMenuLevelOver: function (item) {
            if (item && item.hasOwnProperty("menuSelected")){
                item.menuSelected = true;
            }
        },

鼠标放到菜单1上样式没有立刻改变，当我再次显示菜单的时候改变了

Answer 1

原因：改变list中的对象属性，并不会触发vue重新刷新list,所以不会立即渲染样式
变更：最后还是改成变量驱动样样式 ，代码如下

                <!--知识点menuIndex赋值 动态切换样式事例-->
                <dd id="menuLevel1" v-for="(item,index) in menuShowList"
                    :class="[{'oneMenuLevelFloat': menuIndex==index }, 'oneMenuLevel'] "
                    @mouseover="oneMenuLevelOver(index)"
                >
                     {{item.title}}
                </dd>

js 代码如下

        //选择一级菜单
        oneMenuLevelOver: function (index) {
            this.menuIndex = index
        },