在vue中上面的东西如何写

在Vue.js中，如果你想实现上述功能，你可以将HTML结构、CSS样式和JavaScript逻辑结合在一个组件内。首先，创建一个名为`DynamicFlex.vue`的组件文件：

**HTML (template)部分**:

<template>
  <div class="right1" ref="flexElement">
    <!-- 其他内容 -->
    <button @click="changeFlex">改变flex</button>
  </div>
</template>

**CSS (style)部分**:

.right1 {
  display: flex;
  /* ...其他静态样式... */
}

**JS (script)部分**:

<script setup>
import { ref, onMounted, watchEffect } from 'vue';

const flexElementRef = ref(null);
const newFlexValue = ref(0);

function changeFlex() {
  const newPercent = 30; // 可以在此处设置动态值或者从用户输入获取
  flexElementRef.value.style.flex = `0 0 ${newPercent}%`;
}

onMounted(() => {
  watchEffect(() => {
    if (newFlexValue.value !== 0) {
      changeFlex();
    }
  });
</script>

在上面的代码中，我们使用了Vue的ref来管理元素引用，`@click`绑定了按钮的点击事件，`watchEffect`会在`newFlexValue`变化时自动触发`changeFlex`函数。

请注意，为了在运行时动态修改CSS，你需要确保开启了Vue的运行时模式(`mode: "development"`在构建配置中)或者使用第三方库如`vue-class-component`或`vue-style-loader`。