vue 并排两个li标签鼠标移入当前元素当前元素宽度发生改变另一个元素的宽度也发生改变

vue 并排两个li标签鼠标移入当前元素当前元素宽度发生改变另一个元素的宽度也发生改变如何实现

设置mouseenter鼠标移入事件;同时修改两个元素的style.width
代码如下：（如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
li {
    float: left;
    border: 1px solid #999;
    list-style-type: none;
}
</style>
</head>
<body>

<div class="box">
    <ul>
        <li :style="{width: width}" @mouseenter="width='300px'" @mouseleave="width='200px'">aaaaaa</li>
        <li :style="{width: width}" >bbbbbb</li>
    </ul>
</div>

<script type="text/javascript">
var vm = new Vue({
    el: '.box',
    data: {
        width:"200px",
    }
});
</script>

</body>
</html>

你不应该用 li:hover 吗？

嘿嘿嘿那只有加class名控制class了

vue 并排两个li标签 鼠标移入当前元素 当前元素宽度发生改变 另一个元素的宽度也发生改变

vue 并排两个li标签鼠标移入当前元素当前元素宽度发生改变另一个元素的宽度也发生改变