Vue.js 如何在vuejs中使两个div仅按宽度调整大小

我想创建两个div，并使它们在VueJS中相对于彼此的宽度重新调整大小

$（函数（）{
var A=parseInt（$（'#A'）.width（），10），
B=parseInt（$（'#B'）.width（），10），
Z=parseInt（$（'#Z'）.width（），10），
minw=parseInt（（A+B+Z）*10/100，10），
偏移量=$（“#容器”）。偏移量（），
拆分器=函数（事件、用户界面）{
var aw=parseInt（ui.position.left），
bw=A+B-aw；
//设置宽度和信息。。。
$（'#A'）.css({
宽度：aw
}).children（）.text（aw）；
$（'#B'）.css({
宽度：bw
}).children（）.text（bw）；
};
$（'#Z'）。可拖动({
轴：“x”，
遏制：[
offset.left+minw，
顶，
偏移量。左+A+B-最小，
offset.top+$（“#容器”）.height（）
],
拖动：拆分器
});
//信息。。。
$（'宽度'）。文本（A+B+Z）；
$（#A div'）。文本（A）；
$（'B div'）。正文（B）；
});
#容器{
宽度：90%；
高度：100px；
保证金：0自动；
位置：相对位置；
}
#A,，
#B,，
#Z{
位置：绝对位置；
排名：0；
身高：100%；
}
#A{
左：0；
宽度：39%；
背景色：#ccffcc；
}
#B{
右：0；
宽度：59%；
背景色：#ccccff；
}
#Z{
左：39%；
宽度：2%；
背景色：#cc0000；
光标：移动；
}
#一个分区，
#B组{
位置：绝对位置；
最高：40%；
左：0；
宽度：100%；
文本对齐：居中；
}
#信息{
文本对齐：居中；
线高：2米；
}

容器宽度：
A.
B
您正在将Vue与jQuery混合，因此当jQuery代码运行时，Vue应用程序可能还没有准备好

解决方案可以是将可拖动库包装在
组件中，并使用从Vue组件中安装的
钩子访问DOM节点。
Vuejs尝试了什么？